diff --git a/src/permalink/permalinkparser.js b/src/permalink/permalinkparser.js
index e4bbcc5bf..c80a3cb1f 100644
--- a/src/permalink/permalinkparser.js
+++ b/src/permalink/permalinkparser.js
@@ -50,7 +50,7 @@ const layers = function layers(layersStr) {
         obj[attribute.name] = Number(val);
       } else if (prop === 'th') {
         const attribute = layerModel[prop];
-        obj[attribute.name] = val.split('').map(Number);
+        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
index d35ad6095..f110ea004 100644
--- a/src/permalink/permalinkstore.js
+++ b/src/permalink/permalinkstore.js
@@ -8,26 +8,28 @@ permalinkStore.getSaveLayers = function getSaveLayers(layers, viewer) {
   const saveLayers = [];
   layers.forEach((layer) => {
     const saveLayer = {};
-    // activeThemes is an Array with 2 possible values to choose from: 1, 0
-    // It refers to the visibility of thematicStyling's themes; 1 = visible and 0 = invisible.
     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].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') {
+      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);
       }
-      for (let i = 0; i < style.length; i += 1) {
-        if (style[i][0].visible === false) {
-          activeThemes.push(0);
-        } else {
-          activeThemes.push(1);
-        }
-      }
-      saveLayer.th = activeThemes.join('');
+      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');
diff --git a/src/utils/legendmaker.js b/src/utils/legendmaker.js
index d812bbfb5..c8e454d8a 100644
--- 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(lastItem.label);
+        }
       }
     });
     viewer.setStyle(styleName, style);
+    updateLayer(layer, viewer);
   }
   const cmps = [];
   for (let index = 0; index < style[0].thematic.length; index += 1) {
@@ -250,15 +257,11 @@ export const Legend = function Legend({
     const activeThemes = layer.get('activeThemes');
     if (activeThemes) {
       const style = viewer.getStyles()[styleName];
-      activeThemes.forEach((theme, index) => {
-        if (theme === 0 && layerType !== 'WMS') {
-          style[index][0].visible = false;
-        }
-        if (theme === 0 && layerType === 'WMS') {
-          // style[0].thematic[index].visible = false;
-          // It's not working; any suggestions?
+      if (layer.get('type') !== 'WMS') {
+        for (let i = 0; i < style.length; i += 1) {
+          style[i][0].visible = activeThemes.includes(style[i][0].label);
         }
-      });
+      }
     }
     let cmps = [];
     styleRules.forEach((rule, index) => {