PMTiles in Leaflet: Rendering labels on top of another Leaflet feature

[hkuril]

Is there a way to change the z-order so that PMTiles labels are rendered after any other features are added to the map? I have found a way to do it, by using a Leaflet pane and calling leafletLayer twice on the same .pmtiles file (see sketch below). However, this is inefficient; it will double the query time and cost.

// Create Leaflet map.
var map = L.map('map')

// Add Protomaps tiles (no labels).
var pm_layer_no_labels = protomapsL.leafletLayer(
					url: "my_map.pmtiles",
					paint_rules: PAINT_RULES,                                   
                    label_rules: [])                      
pm_layer_no_labels.addTo(map)

// Add some other line that must appear underneath the labels, but on top of the the tiles.
var geojsonLayer = new L.GeoJSON.AJAX(...)
geojsonLayer.addTo(map)

// Add PMTiles layer again (this time: labels only).
//
// First, create a new pane for the labels.
// https://leafletjs.com/examples/map-panes/
map.createPane('labels');      
// Raise the labels so they will appear above the line feature.
map.getPane('labels').style.zIndex = 650; 
// Disable pointer events for the labels, in case they block the line feature.
map.getPane('labels').style.pointerEvents = 'none'; 
//                                                                               
// Add the PMTiles layer, but don't give any paint rules, only label rules.
// Be sure to specify the pane.
var pm_layer_labels_only = protomapsL.leafletLayer({
                    url: "my_map.pmtiles", // Same URL.
                    paint_rules: [],                                            
                    label_rules: LABEL_RULES,                                   
                    pane: 'labels',                                             
                                                                                
    })                                                                          
pm_layer_labels_only.addTo(map)

[bdon]

leafletLayer can also take a PMTiles object instead of a URL. that means a single data instance will be shared across multiple leaflet layers. Right now this doesn't work ideally because it will combine header/directory requests across those two layers, but will not share the tile data requests. This could be a nice enhancement.

Adding that enhancement would save on network traffic, but still you'd have duplicate canvas layer elements. Do you think that would make this approach efficient enough for your use case?

[bdon]

Well you can try the single PMTiles instance shared among layers now - it may actually do the right thing on non-Firefox browsers since the 2nd request for the same tile byte range should be cached.

[hkuril]

I tried it and it works (it looks the same). I'm not sure how to check if it's using caching for non-Firefox browsers. The changes in the code above would be:

const pmtiles_url = "my_map.pmtiles"         
const my_pmtiles = new protomapsL.PMTiles(pmtiles_url);   

// Add Protomaps tiles (no labels).
var pm_layer_no_labels = protomapsL.leafletLayer(
					url: my_pmtiles,
					paint_rules: PAINT_RULES,                                   
                    label_rules: [])      
					
// ... and same pattern for tile with labels. 

[bdon]

If it's using caching (and you have "disable caches" unchecked in the developer console) the network requests for the 2nd identical byte range of the same file will show (cached) or (disk)

[hkuril]

On Google Chrome it doesn't say (cached), however the size of the second fetch is 0 bytes. I'm not sure what this means.
On Firefox, the 2nd request is the same size as the first.

[bdon]

Yes, that behavior is what I expected on both those browsers.