I am quite new to leaflet and would like some advice. I use the UN Clear map as a base map to which I add some polygons using a GeoJSON layer. I learned about a nice trick here, using map panes to get the labels on top of the polygons. I am trying to recreate that with the UN Clear Map, but the labels stay below the polygons. I don't get any error messages. I think I may not be referencing the labels layer correctly, but don't know how I should do it.
Simplified code:
map = L.map('map', {
minZoom: 3,
maxZoom: 10,
worldCopyJump: true
});
map.createPane('labels');
map.getPane('labels').style.zIndex = 850;
const mapLayer = esri.tiledMapLayer({
url: "https://geoservices.un.org/arcgis/rest/services/ClearMap_WebTopo/MapServer/",
maxZoom: 10,
}).addTo(map);
map.setView([0, 0], 3);
const colorLayer = (L as any).geoJSON(GeoJsonData, geoJsonOptions).addTo(map);
const labelLayer = esri.tiledMapLayer({
url:'https://geoservices.un.org/arcgis/rest/services/ClearMap_WebTopo/MapServer/0',
pane: 'labels'}).addTo(map);