From 0d7d4a08d870622aa60a2ffb8ce7df225a4f18e8 Mon Sep 17 00:00:00 2001
From: Michael Nelson <michael.nelson@gov.bc.ca>
Date: Fri, 24 Feb 2023 11:58:41 -0800
Subject: [PATCH 1/2] Set pane in vector feature style to improve ordering

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.
---
 .../viewer-leaflet/layer/layer-vector-leaflet.js    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js b/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
index d0c329af..e6eeca79 100644
--- a/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
+++ b/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
@@ -140,8 +140,9 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
                     } )
             } )
             .then( function ( projectCoord ) {
+                const layerPaneId = layers[0].config.id;
                 const overlayPane = self.map.getPane('overlayPane');
-                const layerPane = self.map.createPane(layers[0].config.id, overlayPane);
+                const layerPane = self.map.createPane(layerPaneId, overlayPane);
                 layerPane.style.zIndex = zIndex;
 
                 var layerOptions = {
@@ -166,17 +167,17 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
                         layers[0].config.conditionalStyles.forEach(conditionalStyle => {
                             if (!Object.keys(feature.properties).includes(conditionalStyle.property)) {
                                 console.debug(`The feature property ${conditionalStyle.property} was not found; conditional styling will not be applied for this property.`);
-                                return convertStyle(combinedStyle, feature.geometry.type);
+                                return convertStyle(combinedStyle, feature.geometry.type, layerPaneId);
                             }
                             conditionalStyle.conditions.filter(condition => condition.value === feature.properties[conditionalStyle.property]).forEach(condition => {
                                 Object.assign(combinedStyle, condition.style);
                             });
                         });
-                        return convertStyle(combinedStyle, feature.geometry.type);
+                        return convertStyle(combinedStyle, feature.geometry.type, layerPaneId);
                     };
                 } else {
                     layerOptions.style = function(feature) {
-                        return convertStyle(layers[0].config.style, feature.geometry.type);
+                        return convertStyle(layers[0].config.style, feature.geometry.type, layerPaneId);
                     }
                 }
 
@@ -272,7 +273,7 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
 
     // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
-    function convertStyle( styleConfig, type ) {
+    function convertStyle( styleConfig, type, layerPaneId ) {
         if ( !styleConfig ) return {}
 
         if ( type == 'Point' || type == 'MultiPoint' )
@@ -285,6 +286,7 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
                 fillOpacity: styleConfig.fillOpacity,
                 stroke:      styleConfig.stroke !== false,
                 fill:        styleConfig.fill,
+                pane:        layerPaneId
             }
         else
             return {
@@ -299,6 +301,7 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
                 fill:        styleConfig.fill,
                 fillColor:   styleConfig.fillColor,
                 fillOpacity: styleConfig.fillOpacity,
+                pane:        layerPaneId
                 // fillRule:    styleConfig.,
             }
     }

From 908651394dfb47747a4119cfc3f021b6e1ab1e15 Mon Sep 17 00:00:00 2001
From: Michael Nelson <michael.nelson@gov.bc.ca>
Date: Mon, 27 Feb 2023 14:06:41 -0800
Subject: [PATCH 2/2] Remove pane from layerOptions

---
 src/smk/viewer-leaflet/layer/layer-vector-leaflet.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js b/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
index e6eeca79..2c4ca5e2 100644
--- a/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
+++ b/src/smk/viewer-leaflet/layer/layer-vector-leaflet.js
@@ -156,8 +156,7 @@ include.module( 'layer-leaflet.layer-vector-leaflet-js', [ 'layer.layer-vector-j
                             } )
                     },
                     renderer: L.svg(),
-                    interactive: false,
-                    pane: layerPane
+                    interactive: false
                 };
                 
                 if (layers[0].config.conditionalStyles) {