MapBox custom pin not showing

Question

I have a custom pin but it is showing as an ugly default grey pin. Here is my function where I am setting my pin. This is inside of a loop that gets my pins

    featureCollection.features.push({
            "type": "Feature",
            "properties": {
                "id": item.id,
                "title": item.title,
                "image":item.image,
                "description": item.description,
                "icon": {
                    "iconUrl": "../images/pin.png",
                    "iconSize": [29, 36],
                    "iconAnchor": [25, 25],
                    "popupAnchor": [0, -15],
                    "className": "pin"
                }
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    item.long,
                    item.lat
                ]
            }
        });

The example icon code was used from here https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker/

snkashis snkashis · Accepted Answer · 2015-04-26T18:38:23

You will need to prep the custom marker

var customIcon = L.icon({
    "iconUrl": "../images/pin.png",
    "iconSize": [29, 36],
    "iconAnchor": [25, 25],
    "popupAnchor": [0, -15],
    "className": "pin"
})

then setup an options structure to use this new icon like

geojsonOptions = {
    pointToLayer: function(feature,latLng) {
        return L.marker(latLng,{icon:myIcon})
    }
}

and then include those options like this when adding to the map. L.geoJson(featureCollection,geojsonOptions).addTo(map)

MapBox custom pin not showing

1 Answers