custom markers not displaying on mapbox map

Question

I am working with a mapbox map on a web page, and have everything working fine with the map and dropping pins, but cant get custom markers working.

My code that is working for dropping a pin is:

L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', 'marker-size':'large', 'marker-color':'#cc0000', 'marker-symbol':'building' }
}).addTo(map);

This works and populates the map with my locations.

I have used this code to try and add a custom marker, but this doesnt work:

L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', icon: { iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' } }
}).addTo(map);

I also have multiple pins and other layers on the map that can be turned on or off, and everything is working well, I just cant get this custom marker to work at all!

Does anyone have custom markers working with code like this on mapbox?

snkashis snkashis · Accepted Answer · 2015-10-14T17:00:52

I don't think you can specify custom marker options like icon like that in the main GeoJSON properties hash. I believe you would need to do something like the below instead.

var customIcon = new L.Icon({iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' })
L.mapbox.featureLayer(
{
    type: 'Feature',
    geometry: { type:'Point', coordinates:[$longitude, $latitude] },
    properties: { title:'My Location', description:'My Description'}
},
{
    pointToLayer: function(feature,latLng) { return L.marker(latLng, {icon: customIcon}}
 }).addTo(map);

See https://www.mapbox.com/mapbox.js/api/v2.2.2/l-mapbox-featurelayer/

custom markers not displaying on mapbox map

1 Answers