8

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.

7

Just change

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

to

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

See the icon official documentation and this tutorial.

You do not use new for L.Icon (It's supposed to not be required but without it, we encountered an issue...)

See a demo reusing your sample.

Your syntax should be working when extending L.Icon class.

  • Thanks ThomasG77 for the reply. I've tried you suggestion but something still does not work. Firebug still tells to me ... "TypeError: this.options.icon is undefined var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);". – Cesare Nov 8 '14 at 19:39
  • L.Icon should be new L.Icon – ThomasG77 Nov 8 '14 at 21:26
  • Neither the doc nor the tutorial use "new". I believe it's optional. – Ed Staub Mar 18 '16 at 15:12
  • You are right in theory but copy my sample demo code and remove new without it... I do not have an explanation here :( – ThomasG77 Mar 18 '16 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.