CODEWITHSUNDEEP
mapbox
R2D2
R2D2

Reputation: 2640

custom markers not displaying on mapbox map

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?

Upvotes: 0

Views: 783

Answers (1)

snkashis
snkashis

Reputation: 2991

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/

Upvotes: 0

Related Questions