Leaflet: how to use a custom marker on a geojson layer?

Question

I'm trying to put on a Leaflet map a geojson and all works fine until I use the default blu marker.

Now I'd like to use a custom marker (a little .png icon) and I've changed my code in the follow

 var my_json;
 $.getJSON('../Dati/my-geojson.geojson', function(data) {
           my_json = L.geoJson(data, {
            pointToLayer: function(feature, latlng) {
                var smallIcon = L.Icon({
                    options: {
                        iconSize: [27, 27],
                        iconAnchor: [13, 27],
                        popupAnchor:  [1, -24],
                        iconUrl: 'icone/chapel-2.png'
                    }
                });
                return L.marker(latlng, {icon: smallIcon});
            },
           onEachFeature: function (feature, layer) {
                   layer.bindPopup(feature.properties.ATT1 + '<br />'
                                                 + feature.properties.ATT2);
           }
         });
 my_json.addTo(markers.addTo(map));
 TOC.addOverlay(my_json, "My layer name in TOC");
 map.removeLayer(my_json); 
 });

the error that I can see in Firebug is

TypeError: this.options.icon is undefined
var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);

something is going wrong but I don't know how to fix it.

ThomasG77 · Answer 1 · 2021-04-17T19:05:21.947

11

Just change

 var smallIcon = L.Icon({
   options: {
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
   }
 });

to

 var smallIcon = new L.Icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
 });

or

 var smallIcon = L.icon({
     iconSize: [27, 27],
     iconAnchor: [13, 27],
     popupAnchor:  [1, -24],
     iconUrl: 'icone/chapel-2.png'
 });

See the icon official documentation and this tutorial.

You do not use new for L.Icon (It's supposed to not be required but without it, we encountered an issue...)

See a demo reusing your sample.

Your syntax should be working when extending L.Icon class.

edited Apr 17 '21 at 19:05

answered Nov 08 '14 at 18:11

ThomasG77

30,725
1
53
93

Thanks ThomasG77 for the reply. I've tried you suggestion but something still does not work. Firebug still tells to me ... "TypeError: this.options.icon is undefined var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);". – Cesare Nov 08 '14 at 19:39
L.Icon should be new L.Icon – ThomasG77 Nov 08 '14 at 21:26
Neither the doc nor the tutorial use "new". I believe it's optional. – Ed Staub Mar 18 '16 at 15:12
You are right in theory but copy my sample demo code and remove new without it... I do not have an explanation here :( – ThomasG77 Mar 18 '16 at 19:01

score 3 · Answer 2 · answered Jan 15 '20 at 11:54

Forgive me if I'm wrong since I'm sorta new to this, but I noticed that you spelled it as L.Icon with a capital I. Maybe the version is newer or something but it doesn't work when i spell it that way. L.icon with a small i works fine for me.

You also used the small case name in the return statement.

Leaflet: how to use a custom marker on a geojson layer?

2 Answers2