are CircleMarkers supposed to go into the overlay pane by default, and Markers into the marker pane?
With mapbox (which is still based on Leaflet 0.7.x at the time being), yes. And it is more than "by default": you cannot change that behaviour without tweaking Leaflet core.
The situation is very different with Leaflet 1.0, with which you can create your own pane(s) and specify into which pane goes each layer / marker / circleMarker. But if you need mapbox, you will have to wait for them to switch to that version (which should happen soon after Leaflet 1.0 completes "release candidate" state).
is there a more robust way of manipulating the z-index of CircleMarkers and Markers?
There is no robust way in Leaflet 0.7 to individually manipulate stacking order of circle markers relatively to markers, for the above reason. All shapes (polygons, including circle markers) go into the overlayPane and all markers go into the markersPane. You can only order those 2 panes one to each other.
Now you could still imagine a workaround by using a shape for your text / labels, instead of a Marker. That way, all your contours, labels and points will be shapes, go into the overlayPane, and you can use the bringToFront() and bringToBack() methods to modify their order.
As for displaying text in SVG, you could look for plugins, e.g. leaflet-labeled-circle
Sure, what I would do is prep the data file, so both layers have the same field names. Then using that example, I'd modify this function.
function SelectPoints(lat,lon){
var dist = document.getElementById("miles").value;
xy = [lat,lon]; //center point of circle
var theRadius = parseInt(dist) * 1609.34 //1609.34 meters in a mile
//dist is a string so it's convered to an Interger.
selPts.length =0; //Reset the array if selecting new points
layer1.eachLayer(function (layer) {
// Lat, long of current point as it loops through.
layer_lat_long = layer.getLatLng();
// Distance from our circle marker To current point in meters
distance_from_centerPoint = layer_lat_long.distanceTo(xy);
// See if meters is within radius, add the to array
if (distance_from_centerPoint <= theRadius) {
selPts.push(layer.feature);
}
}
layer2.eachLayer(function (layer) {
// Lat, long of current point as it loops through.
layer_lat_long = layer.getLatLng();
// Distance from our circle marker To current point in meters
distance_from_centerPoint = layer_lat_long.distanceTo(xy);
// See if meters is within radius, add the to array
if (distance_from_centerPoint <= theRadius) {
selPts.push(layer.feature);
}
});
);
Now both layers are in the selPts and you can set them to the green geojson layer and add them to the panel.
See http://www.gistechsolutions.com/leaflet/DEMO/sports/ where it selects from 2 different GeoJSON files. http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.zip is a copy of the working files
Best Answer
Try setting zIndex of
L.Markerwith this method.