Folleto: ¿cómo usar un marcador personalizado en una capa geojson?


9

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.

Respuestas:


7

Solo cambia

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

a

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

Consulte la documentación oficial del ícono y este tutorial .

No se usa newpara L.Icon (se supone que no es obligatorio, pero sin él, encontramos un problema ...)

Vea una demostración reutilizando su muestra.

Su sintaxis debería funcionar al extender la L.Iconclase.


Gracias ThomasG77 por la respuesta. He intentado su sugerencia pero algo todavía no funciona. Firebug todavía me dice ... "TypeError: this.options.icon es indefinido var anchor = L.point (this.options.icon.options.popupAnchor || [0, 0]);".
Cesare

L.Icondebería sernew L.Icon
ThomasG77

Ni el documento ni el tutorial usan "nuevo". Yo creo que es opcional.
Ed Staub

Tiene razón en teoría, pero copie mi código de demostración de muestra y elimínelo newsin él ... No tengo una explicación aquí :(
ThomasG77

1

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.