How to position LeafLet CircleMarkers on top of Markers

Question

Question 1: With mapbox.js 2.3.0 (not sure what LeafLet version), are CircleMarkers supposed to go into the overlay pane by default, and Markers into the marker pane?

I basically have 3 sets of objects (labels, contours, points), which I'd like to display in the following z-index order (i.e. bottom to top): contours < labels < points.

My points are CircleMarkers and labels are Markers. If both were in the same pane, I could manipulate the z-index of each at instantiation. But since contours and points are in the overlay pane, and the labels in the marker pane, and LeafLet makes the z-index of the marker pane much higher than that of the overlay pane, the order I get is: contours < points < labels.

I saw this thread, whose best answer suggests to manipulate the z-index of the panes via CSS. The issue with that is that I end up with: labels < contours < points. It is better but not ideal, so...

Question 2: is there a more robust way of manipulating the z-index of CircleMarkers and Markers? It is irrelevant to me which panes they land on.

Below is how I instantiate points and labels, if it helps:

 // Labels:
 L.geoJson(file , {
       onEachFeature: function(feature, polygon) {
          var myIcon = L.divIcon({
              className: 'iconCSS',
              html: "<div class=areaLabel>" + feature.properties.LAD13NM + "</div>"
          });
          var label = L.marker(polygon.getBounds().getCenter(), { icon: myIcon });
          map.addLayer(label);
        }
    });
// Points:
L.geoJson(file, {
  onEachFeature: function(feature, point) {
    var station = L.circleMarker(point.getLatLng());
    map.addLayer(station);
  }
});

Answer 1

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