Leaflet path: how can I set a css class?

Question

Well the title says it all but here is some code so you see what i mean.

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlight         


        

Answer 1

The code below will allow you to add a class after the paths are created by the geoJosn method with D3.

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "your_class");

However, if you want to add them on creation using only leaflet, try returning them in the style(feature) method like this:

function style(feature) {
        return {
          weight: 1,
          opacity: .5,
          fillOpacity: 0.7,
          className: feature.properties.name_of_node
        };
}

That worked really well for me.

Answer 2

You can either add a "className" attribute to your style object, or add the class later like this:

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.setStyle({'className': 'map-path'}); //will add the required class
geojson.addTo(map);

Answer 3

Using Leaflet 1.x, here is a slightly different way to do this - in my case the map was already initialized, so the className styling mentioned above did not work.

function eachFeature(feature, layer) {
     layer.on({
         mouseover: function(e) {$(e.target.getElement()).addClass("active");},
         mouseout: function(e) {$(e.target.getElement()).removeClass("active");}
     });
}

You can also set the class attribute directly using setAttribute on e.target.getElement() if you're not using jQuery.

Answer 4

If you use SVG, then you can get container as this._container and update it class.

If you use Canvas, then there are will be problems, because canvas drowning don't support DOM styles and drawing with content.

So you can't use styles with different implementations and better use styles.

Answer 5

Expanding on @tbicr s answer, you should be able to do something like this:

function onEachFeature(feature, path) {
  path.on('click', addClass);
}

function addClass(e){
    var path = e.target;
    var container = path._container;
    $(container).attr('class', 'test');
}

geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

EDIT: As always, I would be glad flor an explanation, if you decide to downvote, so I can improve it. This is the only answer so far, which describes how to add a class dynamically in detail and I can't see whats wrong with it.

Answer 6

Something like this should do the trick. feature._container exposes the underlying DOM element, so you can use regular DOM operations on it (e.g. classList on modern browsers, or setAttribute('class', 'someClass') in older browsers).

function eachFeature(feature, layer) {
     // Need to use setTimeout hack so the DOM container will be
     // available.  WARNING: may cause race condition issues,
     // maybe tie into some other timing event?
     window.setTimeout(function() {
         feature._container && feature._container.classList.add('someClass');
     }, 0);
}
geojson = L.geoJson(geojson_raw, { onEachFeature: eachFeature });
geojson.addTo(map);