Leaflet: marker icon size on geojson layer

Question

I'm displaying a Geojson layer with Leaflet. I would like to change de default marker icon size.

Here is the code I came up:

    $.ajax({
        type: "GET",
        url: "data.json",
        dataType: 'json',
        success: function (response) {
            geojsonLayer = L.geoJson(response, {
                pointToLayer: function(featuer, latlng) {
                    var smallIcon = L.Icon.extend({
                        options: {
                            'iconSize': [10, 10]
                        }
                    });
                    var myIcon = new smallIcon();
                    return L.marker(latlng, {icon: smallIcon});
                },
                onEachFeature: onEachFeature
            }).addTo(map);
        }
    });

However, I'm having javascript error when loading the page:

Uncaught TypeError: Cannot read property 'popupAnchor' of undefined

Any clues ?

geohacker geohacker · Accepted Answer · 2013-04-23T17:03:50

I think when you extend the L.Icon class, you have to specify the IconUrl, which is the link to the image file used for the icon. See the docs: http://leafletjs.com/reference.html#icon

Since the smallIcon constructor does not satisfy all the required options, myIcon will be undefined.

Try this:

var myIcon = L.icon({
    iconUrl: 'leaflet/images/marker-icon.png',
    iconSize: [10,10],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'leaflet/images/marker-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

L.marker(latlng, {icon: myIcon}).addTo(map);

Leaflet: marker icon size on geojson layer

1 Answers