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 · Accepted Answer · 2021-04-17 19:05:21Z

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.

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
– Cesare, Commented Nov 8, 2014 at 19:39
Neither the doc nor the tutorial use "new". I believe it's optional. — Ed Staub
– Ed Staub, Commented Mar 18, 2016 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
– ThomasG77, Commented Mar 18, 2016 at 19:01

Zeyar Khin Htun · Accepted Answer · 2020-01-15 11:54:01Z

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.

Stack Exchange Network

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

2 Answers 2

Hot Network Questions

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

2 Answers 2

Related

Hot Network Questions