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.
Best Answer
Just change
to
or
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.