fix: z-index not correctly taken into account on GeoJson layers with …

…min/max zooms (closes #853)

core/client/utils/utils.shapes.js

@@ -132,7 +132,7 @@ function getSize (size) {
     - size: Number - the font size in pixel - 14
     - translation: Array - the translation to apply from the center of the shape ['-50%', '-50%']
     - rotation: Number - the rotation to apply in degree
-  - html: Object specifyinng an html overlay
+  - html: Object specifying an html overlay
 
 */
 export function createShape (options) {

map/client/mixins/map/mixin.base-map.js

@@ -202,7 +202,9 @@ export const baseMap = {
       // This is why Leaflet 1.0 introduced panes: https://leafletjs.com/reference.html#map-pane & https://leafletjs.com/examples/map-panes/
       // By implicitely create a pane for each provided z-index makes this transparent for the user
       let zIndex = _.has(leafletOptions, 'zIndex')
-      if (zIndex) {
+      let pane = _.has(leafletOptions, 'pane')
+      // Avoid erasing any existing pane, if so the pane should have been created taken into account the layer zIndex up-front
+      if (zIndex && !pane) {
         zIndex = _.get(leafletOptions, 'zIndex')
         this.createLeafletPane(zIndex)
         // Set layer to use target pane

map/client/mixins/map/mixin.geojson-layers.js

@@ -260,15 +260,17 @@ export const geojsonLayers = {
         // on non-tiled layers we need to use a pane to manage it
         const hasMinZoom = !!_.get(leafletOptions, 'minZoom')
         const hasMaxZoom = !!_.get(leafletOptions, 'maxZoom')
+        const hasZIndex = !!_.get(leafletOptions, 'zIndex')
         if (!leafletOptions.tiled && (hasMinZoom || hasMaxZoom)) {
           const pane = { name: options.name }
           if (hasMinZoom) pane.minZoom = _.get(leafletOptions, 'minZoom')
           if (hasMaxZoom) pane.maxZoom = _.get(leafletOptions, 'maxZoom')
+          if (hasZIndex) pane.zIndex = _.get(leafletOptions, 'zIndex')
           leafletOptions.panes = [pane]
           leafletOptions.pane = options.name
           leafletOptions.shadowPane = options.name
           // Make pane available to styles as well as eg shape markers are created from here
-          for (const type in ['point', 'line', 'polygon']) {
+          for (const type of ['point', 'line', 'polygon']) {
             if (_.has(leafletOptions, `style.${type}`)) {
               _.set(leafletOptions, `style.${type}.pane`, options.name)
               _.set(leafletOptions, `style.${type}.shadowPane`, options.name)