Bring to front some circle markers in leaflet feature

Question

I have a feature in a Leaflet map made up of many circle markers (L.circleMarker). The markers are symbolized to show whether a picture was taken at that location.

What I would like to do is bring all the markers that do have a photo at that location to the top of the layer, similar to how a marker can be raised with a mouse-over (but without mouse-over in this case).

Here is an illustration of the original version:

And this is what I would like them to be:

I've considered having different layers for photos vs. no photos, but due to some functions in the map, it's preferable that they are in a single layer.

Any ideas as to how this could be done with JavaScript and Leaflet?

Not familiar with leaflet, but this is what I would try (in order) 1. Check the docs and see if there is a "bring to front" type feature. 2. Figure out how mouse over brings it to the front (inspect element, watch the styles, it's probably the z-index) then apply the same change in your code. — dlsso

Evan Evan · Accepted Answer · 2017-06-13T22:28:40

In the style definition for the circle marker it's possible to specify the "map pane" to which the marker is rendered (http://leafletjs.com/reference-1.0.3.html#map-pane). It seems like this is the only way to specify the zIndex of circleMarkers (regular markers have a zindexOffset option).

My code looks like this:

var style = {
radius: 1.75,
fillColor: "darkred",
color: "darkred",
pane: 'overlayPane'
};
var picStyle = {
    radius: 0.25,
    fillColor: "blue",
    color: "blue",
    pane: 'shadowPane'
};
var site2 = new L.geoJSON(valuesSite2, {
    onEachFeature: onEachFeature,
    pointToLayer: function (feature, latlng) {
        feature.properties.layer = "Site 2";
        onEachFeature: onEachFeature;
        if (<there is a picture>) {
            return L.circleMarker(latlng, picStyle)
        } else {
            return L.circleMarker(latlng, style);
        }
    }
}).addTo(map);

The result looks like:

Bring to front some circle markers in leaflet feature

1 Answers