feature: add thematicStyling to sharemap (#1962)

* Added activeThemes * Some additional configuration to work for WMS I've tried to use this logic: style[0].thematic[index].visible = false; It's not working. Any ideas? * Using "label" istead of zeros and ones * Use IDs and NAMES in the first place. * Converting id to a string * Update legendmaker.js * converting both ids and labels to strings
origo-map · Feb 20, 2024 · 3096f03 · 3096f03
1 parent 190ef85
commit 3096f03
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 3 deletions.
diff --git a/src/permalink/permalinkparser.js b/src/permalink/permalinkparser.js
@@ -17,6 +17,10 @@ const layerModel = {
   sn: {
     name: 'altStyleIndex',
     dataType: 'number'
+  },
+  th: {
+    name: 'activeThemes',
+    dataType: 'array'
   }
 };
 
@@ -35,7 +39,7 @@ const layers = function layers(layersStr) {
     });
     Object.getOwnPropertyNames(layerObject).forEach((prop) => {
       const val = layerObject[prop];
-      if (Object.prototype.hasOwnProperty.call(layerModel, prop) && prop !== 'o' && prop !== 'sn') {
+      if (Object.prototype.hasOwnProperty.call(layerModel, prop) && prop !== 'o' && prop !== 'sn' && prop !== 'th') {
         const attribute = layerModel[prop];
         obj[attribute.name] = urlparser.strBoolean(val);
       } else if (prop === 'o') {
@@ -44,6 +48,9 @@ const layers = function layers(layersStr) {
       } else if (prop === 'sn') {
         const attribute = layerModel[prop];
         obj[attribute.name] = Number(val);
+      } else if (prop === 'th') {
+        const attribute = layerModel[prop];
+        obj[attribute.name] = val.split('~').map(theme => decodeURIComponent(theme));
       } else {
         obj[prop] = val;
       }

diff --git a/src/permalink/permalinkstore.js b/src/permalink/permalinkstore.js
@@ -4,13 +4,33 @@ let getPin;
 const permalinkStore = {};
 const additionalMapStateParams = {};
 
-permalinkStore.getSaveLayers = function getSaveLayers(layers) {
+permalinkStore.getSaveLayers = function getSaveLayers(layers, viewer) {
   const saveLayers = [];
   layers.forEach((layer) => {
     const saveLayer = {};
+    const activeThemes = [];
+    function getActiveThemes(style) {
+      for (let i = 0; i < style.length; i += 1) {
+        if (style[i][0].visible !== false) {
+          activeThemes.push(style[i][0].id || style[i][0].name || style[i][0].label);
+        }
+      }
+    }
     saveLayer.v = layer.getVisible() === true ? 1 : 0;
     saveLayer.s = layer.get('legend') === true ? 1 : 0;
     saveLayer.o = Number(layer.get('opacity')) * 100;
+    // only get active themes when thematicStyling is true
+    if (layer.get('thematicStyling')) {
+      const styleName = layer.get('styleName');
+      let style = viewer.getStyles()[styleName];
+      if (layer.get('type') !== 'WMS') {
+        getActiveThemes(style);
+      } else if (layer.get('type') === 'WMS' && layer.get('hasThemeLegend')) {
+        style = viewer.getStyles()[styleName][0].thematic.map(obj => [obj]);
+        getActiveThemes(style);
+      }
+      saveLayer.th = activeThemes.join('~');
+    }
     // Only get style for layer styles that have changed
     if (layer.get('defaultStyle') && layer.get('defaultStyle') !== layer.get('styleName')) saveLayer.sn = layer.get('altStyleIndex');
     if (saveLayer.s || saveLayer.v) {
@@ -32,7 +52,7 @@ permalinkStore.getState = function getState(viewer, isExtended) {
   const featureinfo = viewer.getFeatureinfo();
   const type = featureinfo.getSelection().type;
   getPin = featureinfo.getPin;
-  state.layers = permalinkStore.getSaveLayers(layers);
+  state.layers = permalinkStore.getSaveLayers(layers, viewer);
   state.center = view.getCenter().map(coord => Math.round(coord)).join();
   state.zoom = view.getZoom().toString();
 

diff --git a/src/utils/legendmaker.js b/src/utils/legendmaker.js
@@ -162,6 +162,8 @@ function updateLayer(layer, viewer) {
 async function setIcon(src, cmp, styleRules, layer, viewer, clickable) {
   const styleName = layer.get('styleName');
   const style = viewer.getStyle(styleName);
+  const activeThemes = layer.get('activeThemes');
+  const hasThemeLegend = layer.get('hasThemeLegend');
   if (!style[0].thematic) {
     style[0].thematic = [];
     const paramsString = src.icon.json;
@@ -180,9 +182,14 @@ async function setIcon(src, cmp, styleRules, layer, viewer, clickable) {
           label: row.title || row.name,
           visible: row.visible !== false
         });
+        if (activeThemes && hasThemeLegend) {
+          const lastItem = style[0].thematic[style[0].thematic.length - 1];
+          lastItem.visible = activeThemes.includes(row.name || row.title);
+        }
       }
     });
     viewer.setStyle(styleName, style);
+    updateLayer(layer, viewer);
   }
   const cmps = [];
   for (let index = 0; index < style[0].thematic.length; index += 1) {
@@ -247,6 +254,16 @@ export const Legend = function Legend({
       styleName = layer.get('styleName');
     }
     const thematicStyling = layer.get('thematicStyling');
+    const activeThemes = layer.get('activeThemes');
+    if (activeThemes) {
+      const style = viewer.getStyles()[styleName];
+      if (layer.get('type') !== 'WMS') {
+        for (let i = 0; i < style.length; i += 1) {
+          const combinedStr = style[i][0].id?.toString() || style[i][0].label?.toString();
+          style[i][0].visible = activeThemes.includes(combinedStr);
+        }
+      }
+    }
     let cmps = [];
     styleRules.forEach((rule, index) => {
       if (Array.isArray(rule)) {