JSFiddle - React, Tailwind, and code Playground

Map pane experiments in Leaflet 0.7.7

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

JavaScript

var map = L.map("map", {
    zoom: 13,
    center: [34.05, -118.24]
});

var cdbAttr = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
var cdbBase = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',{attribution: cdbAttr}).addTo(map);
var cdbLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png',{clickable: 'false'}).addTo(map);

//create a new pane for the labels tile layer
var labelPane = map._createPane('leaflet-label-pane', map.getPanes().mapPane);
map._panes['labelPane'] = labelPane;
labelPane.appendChild(cdbLabels.getContainer());

//***set the z-index of the labels layer here***
cdbLabels.setZIndex(6);

var circleGroup = L.layerGroup().addTo(map);
var rcircle = L.circle([34.05, -118.22], 2000, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.7
}).addTo(circleGroup);
var gcircle = L.circle([34.05, -118.27], 2000, {
    color: 'green',
    fillColor: '#0f3',
    fillOpacity: 0.7
}).addTo(circleGroup);

//new pane for the vector layer:
var circlePane = map._createPane('leaflet-circle-pane', map.getPanes().mapPane);
map._panes['circlePane'] = circlePane;

//create a container div within the vector pane 
var circleContainer = L.DomUtil.create('div', 'leaflet-layer', circlePane);
//move vectors from overlayPane to new pane
circleContainer.appendChild(map.getPanes().overlayPane.children[0]);

//***set the z-index of the vector layer here***
circleContainer.style.zIndex = 5;

var squareJson = { "type": "Feature",
        "geometry": {
          "type": "Polygon",
           "coordinates": [
             [ [-118.27, 34.07], [-118.22, 34.07], [-118.22, 34.03],
               [-118.27, 34.03], [-118.27, 34.07] ]
             ]
          }
        };
        
var squareLayer = L.geoJson(squareJson, {
    color: 'blue',
    fillColor: '#03f',
    fillOpacity: 0.7
}).addTo(map);