Estoy tratando de poner en un mapa de folleto un geojson y todo funciona bien hasta que use el marcador blu predeterminado.
Ahora me gustaría usar un marcador personalizado (un pequeño icono .png) y he cambiado mi código en el siguiente
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);
});
el error que puedo ver en Firebug es
TypeError: this.options.icon is undefined
var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);
algo va mal pero no sé cómo solucionarlo.
L.Icon
debería sernew L.Icon
new
sin él ... No tengo una explicación aquí :(Perdóname si me equivoco ya que soy nuevo en esto, pero noté que lo deletreaste como L.Icon con una I mayúscula . Tal vez la versión es más nueva o algo así, pero no funciona cuando la deletreo de esa manera. L.icon con una pequeña me funciona bien.
También usó el nombre del caso pequeño en la declaración de devolución.
fuente