Marker setIcon breaks if called before marker is added to the map

[JasonSanford]

While working on the GeoJSON examples page I was wondering if it would be possible to pass more than just the LatLng to the pointToLayer method? This way you could look at the GeoJSON properties and style your marker accordingly, like you can do now with LineString and Polygon. The way it is now (I think) your pointToLayer method can only return the same object (Marker, CircleMarker, etc) without regards to anything in the GeoJSON properties.

I might be wrong on all of this though?

[JasonSanford]

I guess this would be possible if we listened to the "featureparse" event of the GeoJSON layer. Then we could use the (undocumented?) setIcon method of Marker to change the icon for the marker.

Does this sound feasible?

[JasonSanford]

After looking further it doesn't seem possible to change the icon via setIcon in the featureparse event as the marker hasn't been added to the map yet and errors get thrown.

[mourner]

Yep, seems more logical to do this through setIcon in featureparse handler (because other layers get styled there). setIcon breaking if the marker wasn't added is a bug, I'll fix that.

[shramov]

Your last commit cause errors when removeLayer is called on marker.
shramov@4ff6229

[mourner]

Thanks, fixed

[dsample]

I'm getting an error when I try to use setIcon. I get this has no method 'createIcon' error:

Uncaught TypeError: Object function (){this.initialize&&this.initialize.apply(this,arguments)} has no method 'createIcon'.

The code I'm trying is:

        if (e.layer.setIcon && e.properties) {
            e.layer.bindPopup(e.properties.name);
            e.layer.setIcon(new myIcon());
        }
    });

Has this issue re-emerged or am I just not using it correctly?

[mourner]

What Leaflet version? How do you define myIcon?

[dsample]

I'm using http://code.leafletjs.com/leaflet-0.3.1/leaflet.js

I'm defining my icon using the following:

var myIcon = new L.Icon.extend({
    iconUrl: '/images/icons/icon.png',
    shadowUrl: '/images/icons/shadow.png',
    iconSize: new L.Point(32,37),
    shadowSize: new L.Point(51,37),
    iconAnchor: new L.Point(16,35),
    popupAnchor: new L.Point(0,0)
});

[JasonSanford]

It should actually be just L.Icon.extend({ ..., not new L.Icon.extend({ ..., so something like this should work:

var myIcon = L.Icon.extend({
    iconUrl: '/images/icons/icon.png',
    shadowUrl: '/images/icons/shadow.png',
    iconSize: new L.Point(32,37),
    shadowSize: new L.Point(51,37),
    iconAnchor: new L.Point(16,35),
    popupAnchor: new L.Point(0,0)
});

[JasonSanford]

@dsample, Did this fix your problem?

[dsample]

Sorry for not replying sooner, yes, that fixed it, thanks.

[cchristodoulaki]

I have been having a similar issue and cannot get it to work.

I have a geojson file describing points, polygons and lines. I want each point to have it's own marker icon, so in the feature properties I describe the icon url I want.

I am working with this example: http://leaflet.cloudmade.com/examples/geojson.html

and have modified lightRailStop to be

var lightRailStop = {
"type": "FeatureCollection",
"features": [
{
    "type": "Feature",
    "properties": {
        "style": {
            externalGraphic: "../../icons/transportation_plane.png",
            graphicWith: 16,
            graphicHeight: 26,
            graphicYOffset: -26,
            fillColor:'#669933',
            fillOpacity:.8,
            strokeColor:'red',
            strokeWidth:6,
            pointRadius:8
        },
        "icon": "../../icons/transportation_plane.png",
        "popupContent": "This is my very special dynamic mrker I couldn't be more happy :D"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [ 24.065321502681, 35.533841657399]
    }
},{
    "type": "Feature",
    "properties": {
        "popupContent": "20th & Welton Light Rail Stop"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98689115047453, 39.747924136466565]
    }
}
]};

and the leafletembed code to

lightRailGeojsonLayer.on("featureparse", function (e) {
    var popupContent = "<p>I started out as a GeoJSON " + e.geometryType + ", but now I'm a Leaflet vector!</p>";
    popupContent += "<p>This is the default look of a GeoJSON Point.</p>";

     if (e.properties && e.properties.icon && e.geometryType == "Point" ){
         e.layer.setIcon(L.Icon.extend(
         {iconUrl: e.properties.icon}
     ));
    }
    if (e.properties && e.properties.popupContent) {
        popupContent += e.properties.popupContent;
    }
    e.layer.bindPopup(popupContent);
});

I get the same error as above,
has no method 'createIcon'

What am I doing wrong? :S

I am using Leaflet 0.3.1 stable (February 14, 2012)