CODEWITHSUNDEEP
leaflet
Cesare
Cesare

Reputation: 1747

Leaflet: how to use a custom marker on a geojson layer?

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.

Any suggestion will be appreciated

Cesare

Upvotes: 0

Views: 3798

Answers (1)

tmcw
tmcw

Reputation: 11882

See the documentation for L.icon: you don't need to set { options: { ... } }. Just put the options in directly, like it says in the documentation and shows in the example.

Upvotes: 2

Related Questions