I have a map styled with mapbox studio, however I'm having difficulty adding even a basic marker to it, however text is appearing where the marker should be which suggests that the marker would be there.
So here's the code with that map style:
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
});
And here some markers being added from an example in the 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"
}
});
});
However only the text and not the icons appear.
Question is: how would I add just a normal basic colored marker to this map, not even one of the special icon ones?
Thanks.