2017-03-31 119 views
0

我正在嘗試使用來自公共API調用的數據填充mapbox地圖而沒有成功。我嘗試了很多東西,但由於某些原因,標記不會呈現在地圖上。有沒有人遇到類似的問題?Mapbox標記不會渲染

Codepen

預先感謝您。

JS

// Provide your access token 
L.mapbox.accessToken = 'pk.eyJ1IjoiZGllZ29vcmlhbmkiLCJhIjoiY2lvcmQ1ZDRiMDAweXZrbTJ2dmlub2dtaSJ9.1JJGPZzeB3TWfIsTvMvRpA'; 

var coordinates = [] 
var commonName = [] 
geoJson = [] 

//Data 
$.getJSON("https://api.tfl.gov.uk/BikePoint", function(data) { 

    //i = number of loops/val = object 
    $.each(data, function(i, val) { 
    coordinates.push(data[i].lat + ", " + data[i].lon); 
    commonName.push(data[i].commonName); 

    geoJson.push(
    { 
     "type": "Feature", 
     "geometry": { 
      "type": "Point", 
      "coordinates": [coordinates[i]] 
     }, 
     "properties": { 
      'Name': commonName[i], 
      'marker-color': '#3ca0d3', 
      'marker-size': 'large', 
      'marker-symbol': 'rocket', 
     } 
    }); 
    }); 
    //console.log(coordinates); 
    //console.log(commonName); 
}); 

var mapSimple = L.mapbox.map('map_simple', 'mapbox.light') 
    .setView([51.494, -0.171], 14); 
var myLayer = L.mapbox.featureLayer().setGeoJSON(geoJson).addTo(mapSimple); 
mapSimple.scrollWheelZoom.disable(); 

console.log(geoJson) 

HTML

<html> 

<head> 
    <meta charset=utf-8 /> 
    <title></title> 
    <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script> 
    <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' /> 

</head> 

<body> 
    <div id='map_simple' class='map'> </div> 
</body> 

</html> 

回答

0

我強烈懷疑,你所呼叫的無效 '標記符號'。在Mapbox Studio中,火箭符號通常帶有確定確切樣式的數字,例如「火箭11」,而不僅僅是「火箭」。

在MapboxStudio中打開你的風格,並檢查你的火箭圖標的確切名稱。