For each activated layer there is now created a map pane named `[sch…

…ema]-[layer]` and the layer is added to this.
geopartner · Jul 4, 2022 · 50ab6dc · 50ab6dc
1 parent ce38842
commit 50ab6dc
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [CalVer](https://calver.org/).
 
 ## [UNRELEASED]
-###
+### Changed
+- For each activated layer there is now created a map pane named `[schema]-[layer]` and the layer is added to this. The sort layer function will work on the panes instead on layers. This way both tile and vector layers can be sorted between each other.
 
 ## [2022.6.1] - 2022-28-6
 ### Added

diff --git a/browser/modules/baseLayer.js b/browser/modules/baseLayer.js
@@ -622,7 +622,6 @@ module.exports = module.exports = {
                         host: bl.host,
                         type: "mvt",
                         isBaseLayer: true,
-                        pane: 'base'
                     }, bl.config));
 
                     result = addedLayers[0];
@@ -637,7 +636,6 @@ module.exports = module.exports = {
                         maxZoom: typeof bl.maxZoom !== "undefined" ? bl.maxZoom : 20,
                         maxNativeZoom: typeof bl.maxNativeZoom !== "undefined" ? bl.maxNativeZoom : 18,
                         baseLayer: true,
-                        pane: 'base'
                     });
                 } else if (typeof bl.type !== "undefined" && bl.type === "wms") {
                     result = cloud.get().addWmsBaseLayer(bl.url, {
@@ -649,7 +647,6 @@ module.exports = module.exports = {
                         minZoom: typeof bl.minZoom !== "undefined" ? bl.minZoom : 0,
                         maxZoom: typeof bl.maxZoom !== "undefined" ? bl.maxZoom : 20,
                         maxNativeZoom: typeof bl.maxNativeZoom !== "undefined" ? bl.maxNativeZoom : 18,
-                        pane: 'base'
                     });
                 } else {
                     result = cloud.get().addBaseLayer(bl.id, bl.db, bl.config, bl.host || null);

diff --git a/browser/modules/cloud.js b/browser/modules/cloud.js
@@ -52,11 +52,12 @@ module.exports = {
         map.createPane('base');
         map.getPane('base').style.zIndex = 1;
 
-        map.createPane('custom100');
-        map.getPane('custom100').style.zIndex = 100;
+        map.getPane('overlayPane').style.zIndex = 1000000;
+        map.getPane('shadowPane').style.zIndex = 1001000;
+        map.getPane('markerPane').style.zIndex = 1002000;
+        map.getPane('tooltipPane').style.zIndex = 1003000;
+        map.getPane('popupPane').style.zIndex = 1003000;
 
-        map.createPane('custom300');
-        map.getPane('custom300').style.zIndex = 300;
 
         let zoomControl = L.control.zoom({
             position: 'topright'

diff --git a/browser/modules/layerTree/index.js b/browser/modules/layerTree/index.js
@@ -1453,12 +1453,12 @@ module.exports = {
         } catch (e) {
             fieldConf = {};
         }
-
+        const pane = layer.f_table_schema + '-' + layer.f_table_name;
         moduleState.vectorStores[trackingLayerKey] = new geocloud.sqlStore({
             map: cloud.get().map,
             minZoom: parseInt(meta.parseLayerMeta(layerKey)?.vector_min_zoom),
             maxZoom: parseInt(meta.parseLayerMeta(layerKey)?.vector_max_zoom),
-            pane: meta.parseLayerMeta(layerKey)?.vector_pane,
+            pane,
             parentFiltersHash,
             jsonp: false,
             method: "POST",
@@ -1693,7 +1693,7 @@ module.exports = {
                 }
             },
             pointToLayer: (pointToLayer.hasOwnProperty(LAYER.VECTOR + ':' + layerKey) ? pointToLayer[LAYER.VECTOR + ':' + layerKey] : (feature, latlng) => {
-                return L.circleMarker(latlng, {pane: meta.parseLayerMeta(layerKey)?.vector_pane});
+                return L.circleMarker(latlng, {pane});
             }),
             error: layerTreeUtils.storeErrorHandler
         });

diff --git a/browser/modules/layers.js b/browser/modules/layers.js
@@ -190,7 +190,7 @@ module.exports = {
 
                             if (layer.id && (layerTreeUtils.stripPrefix(layer.id) === layerTreeUtils.stripPrefix(itemId))) {
                                 let zIndex = (10000 - indexCounter);
-                                layer.setZIndex(zIndex);
+                                cloud.get().map.getPane(layerTreeUtils.stripPrefix(layer.id).replace('.', '-')).style.zIndex = zIndex;
                                 indexCounter++;
                             }
                         });
@@ -213,7 +213,7 @@ module.exports = {
      * @returns {boolean}
      */
     addUTFGridLayer: function (layerKey) {
-        let metaData = meta.getMetaDataKeys(), fieldConf,  result = false;
+        let metaData = meta.getMetaDataKeys(), fieldConf, result = false;
         let parsedMeta = layerTree.parseLayerMeta(metaData[layerKey]), template;
         try {
             fieldConf = JSON.parse(metaData[layerKey].fieldconf);
@@ -294,22 +294,23 @@ module.exports = {
                             additionalURLParameters.push(`qgs=${qgs}`);
                         }
                     }
-                    var isBaseLayer = !!layerDescription.baselayer;
+                    const isBaseLayer = !!layerDescription.baselayer;
                     layers[[layer]] = cloud.get().addTileLayers({
                         additionalURLParameters,
-                        host: host,
+                        host,
                         layers: [layer],
-                        db: db,
+                        db,
                         isBaseLayer,
-                        mapRequestProxy: mapRequestProxy,
+                        mapRequestProxy,
                         tileCached: useCache,
                         singleTile: !tiled,
                         wrapDateLine: false,
                         displayInLayerSwitcher: true,
                         name: layerDescription.f_table_name,
                         type: "wms", // Always use WMS protocol
                         format: "image/png",
-                        uri: uri,
+                        uri,
+                        pane: layerDescription.f_table_schema + "-" + layerDescription.f_table_name,
                         loadEvent: function (e) {
                             let canvasHasData = false;
                             if (!tiled) {
@@ -362,7 +363,6 @@ module.exports = {
                         subdomains: window.gc2Options.subDomainsForTiles
                     });
 
-                    layers[[layer]][0].setZIndex(layerDescription.sort_id + 10000);
                     me.reorderLayers();
 
                     layerWasAdded = true;
@@ -429,7 +429,6 @@ module.exports = {
                         subdomains: window.gc2Options.subDomainsForTiles
                     });
 
-                    layers[[layer]][0].setZIndex(layerDescription.sort_id + 10000);
                     me.reorderLayers();
 
                     layerWasAdded = true;

diff --git a/browser/modules/switchLayer.js b/browser/modules/switchLayer.js
@@ -446,12 +446,14 @@ module.exports = module.exports = {
         };
 
         let metaData = meta.getMetaData();
+        let sortId;
         for (let j = 0; j < metaData.data.length; j++) {
             let layerKey = (metaData.data[j].f_table_schema + '.' + metaData.data[j].f_table_name);
             if (layerKey === layerTreeUtils.stripPrefix(name)) {
                 let layer = metaData.data[j];
                 let {isVectorLayer, isRasterTileLayer, isVectorTileLayer} = layerTreeUtils.getPossibleLayerTypes(layer);
                 let defaultLayerType = layerTreeUtils.getDefaultLayerType(layer);
+                sortId =  metaData.data[j].sort_id;
 
                 if (LOG) console.log(`switchLayer: ${name}, according to meta, is vector (${isVectorLayer}), raster tile (${isRasterTileLayer}), vector tile (${isVectorTileLayer})`);
                 if (!isVectorLayer && name.startsWith(LAYER.VECTOR + `:`)
@@ -501,6 +503,11 @@ module.exports = module.exports = {
             });
 
             if (enable) {
+
+                const pane = layerTreeUtils.stripPrefix(name).replace('.', '-');
+                if (!cloud.get().map.getPane(pane)) {
+                    cloud.get().map.createPane(pane);
+                }
                 if (LOG) console.log(`switchLayer: enabling ${name}`);
                 if (name.startsWith(LAYER.VECTOR + ':')) {
                     _self.enableVector(gc2Id, doNotLegend, setupControls, failedBefore).then(resolve);
@@ -511,7 +518,7 @@ module.exports = module.exports = {
                 } else {
                     _self.enableRasterTile(gc2Id, forceReload, doNotLegend, setupControls).then(resolve);
                 }
-
+                cloud.get().map.getPane(pane).style.zIndex = sortId + 10000;
                 layers.reorderLayers();
             } else {
                 if (name.startsWith(LAYER.VECTOR + ':')) {

diff --git a/public/js/gc2/geocloud.js b/public/js/gc2/geocloud.js
@@ -1436,8 +1436,7 @@ geocloud = (function () {
                     this.osm = new L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
                         attribution: "&copy; <a target='_blank' rel='noopener' href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
                         maxZoom: 21,
-                        maxNativeZoom: 18,
-                        pane: "base"
+                        maxNativeZoom: 18
                     });
                     lControl.addBaseLayer(this.osm, "OSM");
                     break;