在传单功能中显示一些圆形标记

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?

Answer 1

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: