Set pane in vector feature style to improve ordering

[michaelpnelson]

This improves ordering between layers of type vector/GeoJSON. Multiple GeoJSON layers have features rendered in a shared svg element inside the overlay pane. This amends the styling of features to specify the pane created for the layer. This results in an svg element in each GeoJSON layer pane.

[dgboss]

Can you provide instructions for reproducing the problem you are trying to solve?

It seems odd to me that setting a pane on the style has an impact on the layer. I thought the pane property was applicable to the layer.options object, not the layer.options.style object. A quick look at the Leaflet code base would seem to support this, but I'm not intimately familiar with the entire code base so perhaps I'm missing something.

[michaelpnelson]

Can you provide instructions for reproducing the problem you are trying to solve?

It seems odd to me that setting a pane on the style has an impact on the layer. I thought the pane property was applicable to the layer.options object, not the layer.options.style object. A quick look at the Leaflet code base would seem to support this, but I'm not intimately familiar with the entire code base so perhaps I'm missing something.

The problem is that the ordering of GeoJSON layer features doesn't follow the layer ordering. The earlier layer order change improved ordering between layers of different types. Ordering of layers of the same GeoJSON type seemed OK but we later observed it can differ. We recently changed CleanBC's layer of public charging stations from type Esri Feature to GeoJSON and now the order instability is easy to see (https://cleanbcfleet.apps.gov.bc.ca/) - the public charging station is on top when it should be on the bottom.

'pane' is a parameter in both layer options (https://leafletjs.com/reference.html#geojson-option, inherited from Layer) as well as layer path options (https://leafletjs.com/reference.html#path-option, also inherited from Layer: "By default the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default.").

Without this change, all GeoJSON features are drawn in the same svg element in the overlay pane:

With this change applied, each layer gets its own svg element:

So ... I know it looks odd :) but I hope this explains things. I'm happy to demo it for you if you like.

[dgboss]

Thanks for the comments. I can see what you are trying to solve, but why are you passing the layerPaneId into the convertStyle() function? I don't think pane is a valid property of the style options object being returned by convertStyle() function? Or is it?

[michaelpnelson]

Thanks for the comments. I can see what you are trying to solve, but why are you passing the layerPaneId into the convertStyle() function? I don't think pane is a valid property of the style options object being returned by convertStyle() function? Or is it?

I think pane is valid - https://leafletjs.com/reference.html#path-option shows pane as one of the path options inherited from Layer. These path options (such as others we use like "fillColor" and "stroke") aren't CSS options - maybe they're part of a vocabulary unique to Leaflet.

[dgboss]

Thanks, I missed expanding the properties derived from the layer options! I still find it confusing that you effectively set the pane twice (once via the style and once in layer options around line 160). Would there be any negative consequence to removing pane from layerOptions line 160?

[michaelpnelson]

Thanks, I missed expanding the properties derived from the layer options! I still find it confusing that you effectively set the pane twice (once via the style and once in layer options around line 160). Would there be any negative consequence to removing pane from layerOptions line 160?

There doesn't seem to be any impact when I remove pane from layerOptions. I've tested it in multiple SMK apps including one with multiple layers of supported types and haven't noticed any discrepancies in expected behaviour. I'll remove it.