Folheto: como usar um marcador personalizado em uma camada geojson?


9

Estou tentando colocar em um mapa do Leaflet um geojson e tudo funciona bem até eu usar o marcador blu padrão.

Agora eu gostaria de usar um marcador personalizado (um pequeno ícone .png) e alterei meu código a seguir

 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); 
 });

o erro que eu vejo no Firebug é

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

algo está errado, mas não sei como consertar.

Respostas:


7

Apenas mude

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

para

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

Veja a documentação oficial do ícone e este tutorial .

Você não usa o newL.Icon (não é necessário, mas sem ele, encontramos um problema ...)

Veja uma demonstração reutilizando sua amostra.

Sua sintaxe deve estar funcionando ao estender a L.Iconclasse.


Obrigado ThomasG77 pela resposta. Eu tentei sua sugestão, mas algo ainda não funciona. O Firebug ainda me diz ... "TypeError: this.options.icon está indefinido var anchor = L.point (this.options.icon.options.popupAnchor || [0, 0]);".
Cesare

L.Icondeve sernew L.Icon
ThomasG77 8/04

Nem o documento nem o tutorial usam "novo". Eu acredito que é opcional.
precisa

Você está certo em teoria, mas copie meu exemplo de código de demonstração e remova-o newsem ele ... Eu não tenho uma explicação aqui :(
ThomasG77

1

Perdoe-me se eu estiver errado desde que eu sou sorta novo para isso, mas eu notei que você digitou-lo como L.Icon com um capital I . Talvez a versão seja mais recente ou algo assim, mas não funciona quando eu soletrar dessa maneira. L.icon com um pequeno eu funciona bem para mim.

Você também usou o nome do caso pequeno na declaração de retorno.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.