Leaflet geojson layer with customized divIcon for each feature

Question

I'm trying to set a different divIcon for each point on a leaflet geoJson layer. I have tried everything under the sun but it just doesn't work for me. This is what I'm doing

geoJsonLayer = L.geoJson(null, {
  pointToLayer: function(feature, latlng) {
    var smallIcon = L.DivIcon.extend({
      options: {
        iconSize: [27, 27],
        html: "<div>" + feature.properties.FEATURE_STYLE.SVG_ELEMENT + "</div>"
      }
    });
    return L.marker(latlng, {icon: new smallIcon()});
  },      
  style: getLayerStyle,
  onEachFeature: setFeatureProperties,
});
geoJsonLayer.addTo(baseMap);

feature.properties.FEATURE_STYLE.SVG_ELEMENT is an html <svg> containing the icon.

The icons are displayed ok, but every feature display the same icon.

I've also tried doing the following:

using L.Icon with different .png in iconUrl for each feature
using L.circleMarker with different colors for each feature

They both works as expected (different color / icon per feature). But I can't seem to get the divIcon to display differently for each feature.

Anyone have idea why this is the case?

Thanks in advance.

UPDATE:

This is what feature.properties.FEATURE_STYLE.SVG_ELEMENT looks like

Please include a small code (like your SVG) that still reproduces the issue, in the body of your question. See MCVE. — ghybs
the svg that I'm using is in the pastebin link above: "This is what feature.properties.FEATURE_STYLE.SVG_ELEMENT looks like". It's too long for me to include in a code tag. Thanks. — TaraC
Consider refactoring your SVG to get the minimum that still reproduces your issue. I am sure you might discover things by doing so. — ghybs

ghybs ghybs · Accepted Answer · 2017-04-03T19:30:44

Your code to instantiate a new L.divIcon is more complicated than really necessary, but it works, not considering the SVG part:

https://jsfiddle.net/3v7hd2vx/236/

That being said, please note that:

style option is used for vector layers. Therefore in the case of Point features that are rendered as L.divIcon's, it is not used.
onEachFeature option is applied after the pointToLayer one, because the latter is needed to create the layer that is fed to onEachFeature. Therefore if you build the feature.properties.FEATURE_STYLE.SVG_ELEMENT in there (as the name of your function setFeatureProperties suggests), it is too late.

If you need further help, you would very probably need to share more code, e.g. the style and onEachFeature options, and some sample data, in particular with feature.properties.FEATURE_STYLE.SVG_ELEMENT.

Leaflet geojson layer with customized divIcon for each feature

1 Answers