Changing the style of a leaflet cluster when pressing it

Question

I have created a map with clusters created like so:

//create clustering markers
var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: false,
    showCoverageOnHover: false,
    zoomToBoundsOnClick: false,
    singleMarkerMode: true,          //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
    iconCreateFunction: defineClusterIcon 
});

var layer_group = L.geoJSON(geoJson);


markers.addLayer(layer_group);
map.addLayer(markers);
map.fitBounds(markers.getBounds());

In the defineClusterIcon function, I create a SVG which then is converted to HTML and defines the icon:

return L.divIcon({ 
    iconSize: new L.Point(40, 45),
    html: html,
    classname: 'leaflet-div-icon'
});

I now want to be able to change the style of the cluster (or marker, which also is styled as a cluster), when pressing it - and I want it to return to the original styling when pressed again.

Instead of changing the style of the actual svg elements, I am thinking that it might be easier to just change the style of the class:

.leaflet-div-icon {
    background: rgba(0,0,0,0);
    border: none;       
}

Where I then want to have a border when the cluster/marker has been pressed. I do not know, whether it is possible to change the class within the on clusterclick or click functions, or if it can be done in another way.

My code, as it is now can be found here - where the wanted effect also can be seen on the controls on the right side: http://bl.ocks.org/skov94/f006cd45d2daa2bc67e4f514774fdd0d

Zim Zim · Accepted Answer · 2018-11-21T16:08:23

Instead of switching the outline property of the leaflet-interactive div, i would toggle a class as you did with the controls on the right side (say a outlined class).

This class toggling has to be done in a "onclick" event handler. Leaflet clustering provide its own cluster click events (clusterclick).

The possible targets of the clusterclick event seem to be either the text, circle, or svg nodes of the cluster. We want to get the enclosing div with class leaflet-interactive to add or remove the outlined class on it. This will be made easily possible with Element.closest:

Javascript file

markers
[...]
.on('clusterclick',function(c) {

  console.log("pressed");
  map.closePopup();

  c.originalEvent.target.closest(".leaflet-interactive")
   .classList.toggle("outlined");

});

Then, simply change the style of its circle descendants with css:

CSS file

.leaflet-interactive.outlined circle {
  stroke-width: 2px;
  stroke: blue;
}

Edit: If you're not familiar with css, the selector means: circle nodes that are descendants of nodes with classes leaflet-interactive AND outlined.

Changing the style of a leaflet cluster when pressing it

1 Answers

Javascript file

CSS file