Dodaj podstawowe znaczniki do mapy w mapboxie poprzez mapbox gl js

Question

Mam mapę stylizowaną na studio mapbox, jednak mam problem z dodaniem do niej nawet podstawowego znacznika, jednak tekst pojawia się tam, gdzie powinien być znacznik sugerujący że marker tam będzie.

Więc oto kod z tej mapy stylu:

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA'; 
var map = new mapboxgl.Map({ 
    container: 'map', 
    style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1", 
    center: [-30.50, 40], 
    zoom: 2, 
    interactive: false 
}); 

A oto niektóre znaczniki dodawane z przykładu w API:

map.on('style.load', function() { 

    map.addSource("markers", { 
     "type": "geojson", 
     "data": { 
      "type": "FeatureCollection", 
      "features": [{ 
       "type": "Feature", 
       "geometry": { 
        "type": "Point", 
        "coordinates": [-77.03238901390978, 38.913188059745586] 
       }, 
       "properties": { 
        "title": "Mapbox DC", 
        "marker-symbol": "monument" 
       } 
      }, { 
       "type": "Feature", 
       "geometry": { 
        "type": "Point", 
        "coordinates": [-122.414, 37.776] 
       }, 
       "properties": { 
        "title": "Mapbox SF", 
        "marker-color": "#ff00ff" 
       } 
      }] 
     } 
    }); 

    map.addLayer({ 
     "id": "markers", 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "{marker-symbol}-15", 
      "text-field": "{title}", 
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
      "text-offset": [0, 0.6], 
      "text-anchor": "top" 
     } 
    }); 
}); 

Jednak tylko tekst i nie pojawiają się ikony.

Pytanie brzmi: w jaki sposób dodaję zwykły podstawowy kolorowy marker do tej mapy, a nie jeden z ikon specjalnych?

Dzięki.

Answer 1

Problem polega na tym, że punkt wyjścia twojego stylu w Mapbox Studio, wybrany szablon, nie ma glifów/sprite'ów, do których się odwołujesz w układzie warstw. Jeśli zmienisz styl na taki, którego używasz w przykładzie, którego używałeś: mapbox://styles/mapbox/streets-v8 zobaczysz, że pojawią się znaczniki. To dlatego, że zostały dodane do tego stylu. Jeśli powrócisz do swojego stylu, znowu znikną.

Oto console.log z duszków Twój styl jest:

A oto console.log z Mapbox ulic duszków:

Jak widać, trzeba tylko dwa, podczas gdy mapbox ma dziesiątki (więcej niż na zrzucie ekranu). Można korzystać z tych masz po prostu za pomocą propertynames: default_marker i secondary_marker:

{ 
    "type": "Feature", 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-77.03238901390978, 38.913188059745586] 
    }, 
    "properties": { 
     "title": "Mapbox DC", 
     "marker-symbol": "default_marker" 
    } 
} 

map.addLayer({ 
    "id": "markers", 
    "source": "markers", 
    "type": "symbol", 
    "layout": { 
     "icon-image": "{marker-symbol}", 
     "text-field": "{title}", 
     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], 
     "text-offset": [0, 0.6], 
     "text-anchor": "top" 
    } 
}); 

przykład na Plunker: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

Jeśli potrzebujesz więcej masz do dodania ikonek/glify, które chcesz wykorzystaj swój styl w studio Mapbox. Niestety ma to niewiele wspólnego z "programowaniem", ponieważ jest związane z Mapbox Studio, które jest narzędziem programowym, a więc rodzajem "offtopic" tutaj na stackoverflow.

Jeśli nie trzeba nawet ikonki/glify można również użyć type: circle i właściwości paint do tworzenia prostych koła:

map.addLayer({ 
    "id": "markers", 
    "source": "markers", 
    "type": "circle", 
    "paint": { 
     "circle-radius": 10, 
     "circle-color": "#007cbf" 
    } 
}); 

przykład na Plunker: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

Więcej na style i duszków CAN można znaleźć tutaj:

• https://www.mapbox.com/help/define-sprite/
• https://www.mapbox.com/developers/api/styles/#Sprites
• https://www.mapbox.com/mapbox-gl-style-spec/#sprite