Leaflet: bagaimana cara menggunakan marker kustom pada layer geojson?

9

Saya mencoba untuk menempatkan pada peta Leaflet geojson dan semua berfungsi dengan baik sampai saya menggunakan penanda blu default.

Sekarang saya ingin menggunakan marker khusus (ikon .png kecil) dan saya telah mengubah kode saya di 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); 
 });

kesalahan yang bisa saya lihat di Firebug adalah

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

ada yang tidak beres tapi saya tidak tahu bagaimana cara memperbaikinya.

Cesare
sumber

Jawaban:

8

Ubah saja

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

untuk

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

Lihat ikon dokumentasi resmi dan tutorial ini .

Anda tidak menggunakan newuntuk L.Icon (Seharusnya tidak diperlukan tetapi tanpa itu, kami mengalami masalah ...)

Lihat demo menggunakan kembali sampel Anda.

Sintaks Anda seharusnya berfungsi saat memperluas L.Iconkelas.

ThomasG77
sumber
Terima kasih ThomasG77 untuk jawabannya. Saya sudah mencoba saran Anda tetapi sesuatu masih tidak berhasil. Firebug masih memberi tahu saya ... "TypeError: this.options.icon tidak didefinisikan var anchor = L.point (this.options.icon.options.popupAnchor || [0, 0]);".
Cesare
L.Iconseharusnyanew L.Icon
ThomasG77
Baik dokumen maupun tutorial tidak menggunakan "baru". Saya percaya itu opsional.
Ed Staub
Anda benar secara teori tetapi salin contoh kode demo saya dan hapus newtanpa itu ... Saya tidak punya penjelasan di sini :(
ThomasG77
3

Maafkan saya jika saya salah karena saya agak baru ini, tapi saya melihat bahwa Anda dieja sebagai L.Icon dengan modal saya . Mungkin versinya lebih baru atau sesuatu tetapi tidak berfungsi ketika saya mengejanya seperti itu. L.icon dengan kecil saya bekerja dengan baik untuk saya.

Anda juga menggunakan nama huruf kecil dalam pernyataan pengembalian.

Zeyar Khin Htun
sumber