From c2789b830cc5f01b96d82381fd0aff29ade3dfe2 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Thu, 20 Jan 2022 10:32:18 +0100
Subject: [PATCH 01/17] Dropdown style selection

---
 src/controls/legend/overlayproperties.js | 30 +++++++++++++++++++++---
 src/viewer.js                            | 19 +++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index 0ab68e33e..8fdcdec8d 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -1,4 +1,4 @@
-import { Component, InputRange } from '../../ui';
+import { Component, InputRange, Dropdown } from '../../ui';
 import { Legend } from '../../utils/legendmaker';
 
 const OverlayProperties = function OverlayProperties(options = {}) {
@@ -15,6 +15,9 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   const opacityControl = layer.get('opacityControl') !== false;
   const style = viewer.getStyle(layer.get('styleName'));
   const legend = Legend(style, opacity);
+  const alternativeStyles = viewer.getLayerAlternativeStyles(layer);
+
+  let styleSelection;
   let overlayEl;
   let sliderEl;
   let label = '';
@@ -43,14 +46,28 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     }
   }
 
+  function renderStyleSelection() {
+    return alternativeStyles ? styleSelection.render() : '';
+  }
+
   return Component({
     onInit() {
-      this.addComponents([transparencySlider]);
+      styleSelection = Dropdown({
+        direction: 'up',
+        cls: 'o-scalepicker text-white flex',
+        contentCls: 'bg-grey-darker text-smallest rounded',
+        buttonCls: 'bg-black text-white',
+        ariaLabel: 'Välj skala',
+        buttonIconCls: 'white'
+      });
+
+      this.addComponents([transparencySlider, styleSelection]);
       this.on('click', (e) => {
         extendedLegendZoom(e);
       });
     },
     onRender() {
+      this.dispatch('render');
       sliderEl = document.getElementById(transparencySlider.getId());
       overlayEl = document.getElementById(this.getId());
       overlayEl.addEventListener('click', (e) => {
@@ -66,10 +83,17 @@ const OverlayProperties = function OverlayProperties(options = {}) {
           layer.setOpacity(sliderEl.valueAsNumber);
         });
       }
+      if (alternativeStyles) {
+        styleSelection.setItems(Object.keys(alternativeStyles));
+      }
     },
     render() {
       return `<div id="${this.getId()}" class="${cls} border-bottom">
-                <div class="padding-small">${legend}${transparencySlider.render()}</div>
+                <div class="padding-small">
+                  ${legend}
+                  ${renderStyleSelection()}
+                  ${transparencySlider.render()}
+                </div>
                 ${abstract ? `<div class="padding-small padding-x text-small">${abstract}</div>` : ''}
               </div>`;
     },
diff --git a/src/viewer.js b/src/viewer.js
index dc6bf040e..239564ed5 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -61,6 +61,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
   const center = urlParams.center || centerOption;
   const zoom = urlParams.zoom || zoomOption;
   const groups = flattenGroups(groupOptions);
+  const layerAlternativeStyles = {};
 
   const getCapabilitiesLayers = () => {
     const capabilitiesPromises = [];
@@ -366,8 +367,25 @@ const Viewer = function Viewer(targetOption, options = {}) {
     return false;
   };
 
+  const getLayerAlternativeStyles = function getLayerAlternativeStyles(layer) {
+    const alternativeStyles = layerAlternativeStyles[layer.get('name')];
+    if (layerAlternativeStyles[layer.get('name')]) {
+      const asArray = Object.entries(styles);
+      const filtered = asArray.filter(([key]) => alternativeStyles.includes(key));
+      return Object.fromEntries(filtered);
+    }
+    return null;
+  };
+
+  const addLayerAlternativeStyles = function addLayerAlternativeStyles(layerProps) {
+    if (!layerAlternativeStyles[layerProps.name]) {
+      layerAlternativeStyles[layerProps.name] = layerProps.alternativeStyles;
+    }
+  };
+
   const addLayer = function addLayer(layerProps) {
     const layer = Layer(layerProps, this);
+    addLayerAlternativeStyles(layerProps);
     map.addLayer(layer);
     this.dispatch('addlayer', {
       layerName: layerProps.name
@@ -584,6 +602,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     getSearchableLayers,
     getSize,
     getLayer,
+    getLayerAlternativeStyles,
     getLayers,
     getLayersByProperty,
     getMap,

From 1a6a4b6ac47f40c1f96d664d0003b5a4f198c6bf Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Tue, 1 Feb 2022 15:21:30 +0100
Subject: [PATCH 02/17] Alternative styles dropdown

---
 scss/_stylepicker.scss                   | 24 +++++++++++++++
 scss/origo.scss                          |  1 +
 src/controls/legend/overlay.js           |  9 ++++++
 src/controls/legend/overlayproperties.js | 38 +++++++++++++++++++-----
 4 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 scss/_stylepicker.scss

diff --git a/scss/_stylepicker.scss b/scss/_stylepicker.scss
new file mode 100644
index 000000000..972bf7637
--- /dev/null
+++ b/scss/_stylepicker.scss
@@ -0,0 +1,24 @@
+.o-stylepicker {
+  height: 1.25rem;
+  margin-right: 5px;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  min-width: 110px;
+}
+
+.o-stylepicker button {
+  border-radius: 10px;
+  font-family: Arial, 'Helvetica Neue', sans-serif;
+  font-size: .625rem;
+  line-height: 1.25rem;
+}
+
+.o-stylepicker .dropdown ul {
+  border: 2px solid $grey-light;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.o-stylepicker .dropdown li:hover {
+  color: $grey-darker;
+}
\ No newline at end of file
diff --git a/scss/origo.scss b/scss/origo.scss
index 96653a69f..b0c48fee8 100644
--- a/scss/origo.scss
+++ b/scss/origo.scss
@@ -25,6 +25,7 @@
   @import 'popover';
   @import 'dropdown';
   @import 'sidebar';
+  @import 'stylepicker';
   @import 'close';
   @import 'icon';
   @import 'tooltip';
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index b8d7ce6e5..ecef756c8 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -137,6 +137,12 @@ const OverlayLayer = function OverlayLayer(options) {
     el.remove();
   };
 
+  const onLayerStyleChange = function onLayerStyleChange() {
+    const newStyle = viewer.getStyle(layer.get('styleName'));
+    const newIcon = HeaderIcon(newStyle, opacity) || icon;
+    layerIcon.dispatch('change', { icon: newIcon });
+  };
+
   return Component({
     name,
     getLayer,
@@ -175,6 +181,9 @@ const OverlayLayer = function OverlayLayer(options) {
         });
         document.getElementById(this.getId()).dispatchEvent(visibleEvent);
       });
+      layer.on('change:style', () => {
+        onLayerStyleChange();
+      });
     },
     render() {
       return `<li id="${this.getId()}" class="${cls}">${ButtonsHtml}</li>`;
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index 8fdcdec8d..053890c3d 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -1,5 +1,6 @@
 import { Component, InputRange, Dropdown } from '../../ui';
 import { Legend } from '../../utils/legendmaker';
+import Style from '../../style';
 
 const OverlayProperties = function OverlayProperties(options = {}) {
   const {
@@ -17,6 +18,12 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   const legend = Legend(style, opacity);
   const alternativeStyles = viewer.getLayerAlternativeStyles(layer);
 
+  const legendComponent = Component({
+    render() {
+      return `<div id=${this.getId()}>${legend}</div>`;
+    }
+  });
+
   let styleSelection;
   let overlayEl;
   let sliderEl;
@@ -50,18 +57,30 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     return alternativeStyles ? styleSelection.render() : '';
   }
 
+  const onSelectStyle = (styleName) => {
+    const newStyle = Style.createStyle({ style: styleName, viewer });
+    const legendCmp = document.getElementById(legendComponent.getId());
+    legendCmp.innerHTML = Legend(viewer.getStyle(styleName), opacity);
+    layer.setProperties({ styleName });
+    layer.setStyle(newStyle);
+    layer.dispatchEvent('change:style');
+  };
+
   return Component({
     onInit() {
       styleSelection = Dropdown({
         direction: 'up',
-        cls: 'o-scalepicker text-white flex',
-        contentCls: 'bg-grey-darker text-smallest rounded',
-        buttonCls: 'bg-black text-white',
-        ariaLabel: 'Välj skala',
-        buttonIconCls: 'white'
+        cls: 'o-stylepicker text-black flex',
+        contentCls: 'bg-white text-smallest rounded',
+        buttonCls: 'bg-white border text-black',
+        text: 'Välj styling',
+        buttonIconCls: 'black'
       });
-
-      this.addComponents([transparencySlider, styleSelection]);
+      const components = [transparencySlider];
+      if (alternativeStyles) {
+        components.push(styleSelection);
+      }
+      this.addComponents(components);
       this.on('click', (e) => {
         extendedLegendZoom(e);
       });
@@ -85,12 +104,15 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       }
       if (alternativeStyles) {
         styleSelection.setItems(Object.keys(alternativeStyles));
+        document.getElementById(styleSelection.getId()).addEventListener('dropdown:select', (evt) => {
+          onSelectStyle(evt.target.textContent);
+        });
       }
     },
     render() {
       return `<div id="${this.getId()}" class="${cls} border-bottom">
                 <div class="padding-small">
-                  ${legend}
+                  ${legendComponent.render()}
                   ${renderStyleSelection()}
                   ${transparencySlider.render()}
                 </div>

From 0fa0190fca166182d116d1e0b180f04379ff706d Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 2 Feb 2022 10:45:45 +0100
Subject: [PATCH 03/17] Dark styling for dropdown

---
 scss/_stylepicker.scss                   |  6 ------
 src/controls/legend/overlayproperties.js | 15 ++++++++++-----
 src/viewer.js                            |  4 ++--
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/scss/_stylepicker.scss b/scss/_stylepicker.scss
index 972bf7637..c67c1aaa2 100644
--- a/scss/_stylepicker.scss
+++ b/scss/_stylepicker.scss
@@ -13,12 +13,6 @@
   line-height: 1.25rem;
 }
 
-.o-stylepicker .dropdown ul {
-  border: 2px solid $grey-light;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
 .o-stylepicker .dropdown li:hover {
   color: $grey-darker;
 }
\ No newline at end of file
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index 053890c3d..a4fb39a68 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -41,6 +41,10 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     label
   });
 
+  function hasAlternativeStyles() {
+    return Object.entries(alternativeStyles).length > 1;
+  }
+
   function extendedLegendZoom(e) {
     const parentOverlay = document.getElementById(options.parent.getId());
 
@@ -54,10 +58,11 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   }
 
   function renderStyleSelection() {
-    return alternativeStyles ? styleSelection.render() : '';
+    return hasAlternativeStyles() ? styleSelection.render() : '';
   }
 
   const onSelectStyle = (styleName) => {
+    styleSelection.setButtonText(styleName);
     const newStyle = Style.createStyle({ style: styleName, viewer });
     const legendCmp = document.getElementById(legendComponent.getId());
     legendCmp.innerHTML = Legend(viewer.getStyle(styleName), opacity);
@@ -71,13 +76,13 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       styleSelection = Dropdown({
         direction: 'up',
         cls: 'o-stylepicker text-black flex',
-        contentCls: 'bg-white text-smallest rounded',
+        contentCls: 'bg-grey-lighter text-smallest rounded',
         buttonCls: 'bg-white border text-black',
-        text: 'Välj styling',
+        text: layer.get('styleName'),
         buttonIconCls: 'black'
       });
       const components = [transparencySlider];
-      if (alternativeStyles) {
+      if (hasAlternativeStyles()) {
         components.push(styleSelection);
       }
       this.addComponents(components);
@@ -102,7 +107,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
           layer.setOpacity(sliderEl.valueAsNumber);
         });
       }
-      if (alternativeStyles) {
+      if (hasAlternativeStyles()) {
         styleSelection.setItems(Object.keys(alternativeStyles));
         document.getElementById(styleSelection.getId()).addEventListener('dropdown:select', (evt) => {
           onSelectStyle(evt.target.textContent);
diff --git a/src/viewer.js b/src/viewer.js
index 239564ed5..52fc48904 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -369,7 +369,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
 
   const getLayerAlternativeStyles = function getLayerAlternativeStyles(layer) {
     const alternativeStyles = layerAlternativeStyles[layer.get('name')];
-    if (layerAlternativeStyles[layer.get('name')]) {
+    if (alternativeStyles) {
       const asArray = Object.entries(styles);
       const filtered = asArray.filter(([key]) => alternativeStyles.includes(key));
       return Object.fromEntries(filtered);
@@ -379,7 +379,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
 
   const addLayerAlternativeStyles = function addLayerAlternativeStyles(layerProps) {
     if (!layerAlternativeStyles[layerProps.name]) {
-      layerAlternativeStyles[layerProps.name] = layerProps.alternativeStyles;
+      layerAlternativeStyles[layerProps.name] = [layerProps.style].concat(layerProps.alternativeStyles);
     }
   };
 

From 31a2fe2ed2e8a2393a3e7c15835d97d35b2987bf Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Mon, 7 Feb 2022 09:12:44 +0100
Subject: [PATCH 04/17] Fix overlay icon styling

---
 src/controls/legend/overlay.js           | 16 ++++++++++------
 src/controls/legend/overlayproperties.js | 22 ++++++++++++++--------
 src/viewer.js                            | 10 ++--------
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index ecef756c8..c9c4fb233 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -2,10 +2,8 @@ import { Component, Button, dom } from '../../ui';
 import { HeaderIcon } from '../../utils/legendmaker';
 
 const OverlayLayer = function OverlayLayer(options) {
-  let {
-    headerIconCls = ''
-  } = options;
   const {
+    headerIconCls = '',
     cls: clsSettings = '',
     icon = '#o_list_24px',
     iconCls = 'grey-lightest',
@@ -16,10 +14,12 @@ const OverlayLayer = function OverlayLayer(options) {
   } = options;
 
   const buttons = [];
+  let headerIconClass = headerIconCls;
   let removeButton;
   let ButtonsHtml;
   let layerList;
 
+  const layerIconCls = 'round compact icon-small light relative no-shrink';
   const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim();
   const title = layer.get('title') || 'Titel saknas';
   const name = layer.get('name');
@@ -37,7 +37,7 @@ const OverlayLayer = function OverlayLayer(options) {
   let headerIcon = HeaderIcon(style, opacity);
   if (!headerIcon) {
     headerIcon = icon;
-    headerIconCls = iconCls;
+    headerIconClass = iconCls;
   }
 
   const getCheckIcon = (visible) => {
@@ -59,7 +59,7 @@ const OverlayLayer = function OverlayLayer(options) {
   };
 
   const layerIcon = Button({
-    cls: `${headerIconCls} round compact icon-small light relative no-shrink`,
+    cls: `${headerIconClass} ${layerIconCls}`,
     click() {
       const eventOverlayProps = new CustomEvent('overlayproperties', {
         bubbles: true,
@@ -139,7 +139,11 @@ const OverlayLayer = function OverlayLayer(options) {
 
   const onLayerStyleChange = function onLayerStyleChange() {
     const newStyle = viewer.getStyle(layer.get('styleName'));
-    const newIcon = HeaderIcon(newStyle, opacity) || icon;
+    const layerIconCmp = document.getElementById(layerIcon.getId());
+    let newIcon = HeaderIcon(newStyle, opacity);
+    headerIconClass = !newIcon ? iconCls : headerIconCls;
+    newIcon = !newIcon ? icon : newIcon;
+    layerIconCmp.className = `${headerIconClass} ${layerIconCls}`;
     layerIcon.dispatch('change', { icon: newIcon });
   };
 
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index a4fb39a68..a36872ef4 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -42,7 +42,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   });
 
   function hasAlternativeStyles() {
-    return Object.entries(alternativeStyles).length > 1;
+    return alternativeStyles.length > 0;
   }
 
   function extendedLegendZoom(e) {
@@ -61,12 +61,18 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     return hasAlternativeStyles() ? styleSelection.render() : '';
   }
 
-  const onSelectStyle = (styleName) => {
-    styleSelection.setButtonText(styleName);
-    const newStyle = Style.createStyle({ style: styleName, viewer });
+  function getStyleDisplayName(styleName) {
+    const altStyle = alternativeStyles.find(s => s.style === styleName);
+    return (altStyle && altStyle.title) || styleName;
+  }
+
+  const onSelectStyle = (styleTitle) => {
+    const altStyle = alternativeStyles.find(s => s.title === styleTitle);
+    styleSelection.setButtonText(styleTitle);
+    const newStyle = Style.createStyle({ style: altStyle.style, viewer });
     const legendCmp = document.getElementById(legendComponent.getId());
-    legendCmp.innerHTML = Legend(viewer.getStyle(styleName), opacity);
-    layer.setProperties({ styleName });
+    legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity);
+    layer.setProperties({ styleName: altStyle.style });
     layer.setStyle(newStyle);
     layer.dispatchEvent('change:style');
   };
@@ -78,7 +84,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         cls: 'o-stylepicker text-black flex',
         contentCls: 'bg-grey-lighter text-smallest rounded',
         buttonCls: 'bg-white border text-black',
-        text: layer.get('styleName'),
+        text: getStyleDisplayName(layer.get('styleName')),
         buttonIconCls: 'black'
       });
       const components = [transparencySlider];
@@ -108,7 +114,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         });
       }
       if (hasAlternativeStyles()) {
-        styleSelection.setItems(Object.keys(alternativeStyles));
+        styleSelection.setItems(alternativeStyles.map(altStyle => altStyle.title));
         document.getElementById(styleSelection.getId()).addEventListener('dropdown:select', (evt) => {
           onSelectStyle(evt.target.textContent);
         });
diff --git a/src/viewer.js b/src/viewer.js
index 52fc48904..7920970de 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -368,18 +368,12 @@ const Viewer = function Viewer(targetOption, options = {}) {
   };
 
   const getLayerAlternativeStyles = function getLayerAlternativeStyles(layer) {
-    const alternativeStyles = layerAlternativeStyles[layer.get('name')];
-    if (alternativeStyles) {
-      const asArray = Object.entries(styles);
-      const filtered = asArray.filter(([key]) => alternativeStyles.includes(key));
-      return Object.fromEntries(filtered);
-    }
-    return null;
+    return layerAlternativeStyles[layer.get('name')] || [];
   };
 
   const addLayerAlternativeStyles = function addLayerAlternativeStyles(layerProps) {
     if (!layerAlternativeStyles[layerProps.name]) {
-      layerAlternativeStyles[layerProps.name] = [layerProps.style].concat(layerProps.alternativeStyles);
+      layerAlternativeStyles[layerProps.name] = layerProps.alternativeStyles;
     }
   };
 

From 6dc015328b6922b629e3487823310787f589b6bc Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 9 Feb 2022 12:05:16 +0100
Subject: [PATCH 05/17] Dropdown button box shadow + font size

---
 src/controls/legend/overlayproperties.js | 5 +++--
 src/ui/dropdown.js                       | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index a36872ef4..ee06d6aee 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -82,8 +82,9 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       styleSelection = Dropdown({
         direction: 'up',
         cls: 'o-stylepicker text-black flex',
-        contentCls: 'bg-grey-lighter text-smallest rounded',
-        buttonCls: 'bg-white border text-black',
+        contentCls: 'bg-grey-lighter text-smaller rounded box-shadow',
+        buttonCls: 'bg-white border text-black box-shadow',
+        buttonTextCls: 'text-smaller',
         text: getStyleDisplayName(layer.get('styleName')),
         buttonIconCls: 'black'
       });
diff --git a/src/ui/dropdown.js b/src/ui/dropdown.js
index c88c5c090..21fad6ee7 100644
--- a/src/ui/dropdown.js
+++ b/src/ui/dropdown.js
@@ -15,7 +15,8 @@ export default function Dropdown(options = {}) {
     style: styleSettings,
     direction = 'down',
     text = ' ',
-    ariaLabel = ''
+    ariaLabel = '',
+    buttonTextCls = 'flex'
   } = options;
 
   let containerElement;
@@ -78,7 +79,7 @@ export default function Dropdown(options = {}) {
         icon: `#ic_arrow_drop_${direction}_24px`,
         iconCls: `${buttonIconCls} icon-smaller flex`,
         ariaLabel,
-        textCls: 'flex'
+        textCls: buttonTextCls
       });
 
       if (direction === 'down') {

From d2a9c5de4edcb4865b9a8f7690d6b34993500949 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 9 Feb 2022 13:32:29 +0100
Subject: [PATCH 06/17] remove box shadow for dropdown menu

---
 src/controls/legend/overlayproperties.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index ee06d6aee..ade809aa5 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -82,7 +82,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       styleSelection = Dropdown({
         direction: 'up',
         cls: 'o-stylepicker text-black flex',
-        contentCls: 'bg-grey-lighter text-smaller rounded box-shadow',
+        contentCls: 'bg-grey-lighter text-smaller rounded',
         buttonCls: 'bg-white border text-black box-shadow',
         buttonTextCls: 'text-smaller',
         text: getStyleDisplayName(layer.get('styleName')),

From bf7061e452a90afa588ac82b92db82bd89893668 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Mon, 28 Feb 2022 11:00:14 +0100
Subject: [PATCH 07/17] change name to stylePicker

---
 src/controls/legend/overlay.js           |  1 +
 src/controls/legend/overlayproperties.js | 18 +++++++++---------
 src/viewer.js                            | 16 ++++++++--------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index c9c4fb233..f70f832ee 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -69,6 +69,7 @@ const OverlayLayer = function OverlayLayer(options) {
       });
       document.getElementById(this.getId()).dispatchEvent(eventOverlayProps);
     },
+    iconStyle: { border: '2px solid green' },
     style: {
       height: '1.5rem',
       width: '1.5rem'
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index ade809aa5..be3f77c6d 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -16,7 +16,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   const opacityControl = layer.get('opacityControl') !== false;
   const style = viewer.getStyle(layer.get('styleName'));
   const legend = Legend(style, opacity);
-  const alternativeStyles = viewer.getLayerAlternativeStyles(layer);
+  const stylePicker = viewer.getLayerStylePicker(layer);
 
   const legendComponent = Component({
     render() {
@@ -41,8 +41,8 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     label
   });
 
-  function hasAlternativeStyles() {
-    return alternativeStyles.length > 0;
+  function hasStylePicker() {
+    return stylePicker.length > 0;
   }
 
   function extendedLegendZoom(e) {
@@ -58,16 +58,16 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   }
 
   function renderStyleSelection() {
-    return hasAlternativeStyles() ? styleSelection.render() : '';
+    return hasStylePicker() ? styleSelection.render() : '';
   }
 
   function getStyleDisplayName(styleName) {
-    const altStyle = alternativeStyles.find(s => s.style === styleName);
+    const altStyle = stylePicker.find(s => s.style === styleName);
     return (altStyle && altStyle.title) || styleName;
   }
 
   const onSelectStyle = (styleTitle) => {
-    const altStyle = alternativeStyles.find(s => s.title === styleTitle);
+    const altStyle = stylePicker.find(s => s.title === styleTitle);
     styleSelection.setButtonText(styleTitle);
     const newStyle = Style.createStyle({ style: altStyle.style, viewer });
     const legendCmp = document.getElementById(legendComponent.getId());
@@ -89,7 +89,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         buttonIconCls: 'black'
       });
       const components = [transparencySlider];
-      if (hasAlternativeStyles()) {
+      if (hasStylePicker()) {
         components.push(styleSelection);
       }
       this.addComponents(components);
@@ -114,8 +114,8 @@ const OverlayProperties = function OverlayProperties(options = {}) {
           layer.setOpacity(sliderEl.valueAsNumber);
         });
       }
-      if (hasAlternativeStyles()) {
-        styleSelection.setItems(alternativeStyles.map(altStyle => altStyle.title));
+      if (hasStylePicker()) {
+        styleSelection.setItems(stylePicker.map(altStyle => altStyle.title));
         document.getElementById(styleSelection.getId()).addEventListener('dropdown:select', (evt) => {
           onSelectStyle(evt.target.textContent);
         });
diff --git a/src/viewer.js b/src/viewer.js
index 7920970de..098ccee6f 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -61,7 +61,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
   const center = urlParams.center || centerOption;
   const zoom = urlParams.zoom || zoomOption;
   const groups = flattenGroups(groupOptions);
-  const layerAlternativeStyles = {};
+  const layerStylePicker = {};
 
   const getCapabilitiesLayers = () => {
     const capabilitiesPromises = [];
@@ -367,19 +367,19 @@ const Viewer = function Viewer(targetOption, options = {}) {
     return false;
   };
 
-  const getLayerAlternativeStyles = function getLayerAlternativeStyles(layer) {
-    return layerAlternativeStyles[layer.get('name')] || [];
+  const getLayerStylePicker = function getLayerStylePicker(layer) {
+    return layerStylePicker[layer.get('name')] || [];
   };
 
-  const addLayerAlternativeStyles = function addLayerAlternativeStyles(layerProps) {
-    if (!layerAlternativeStyles[layerProps.name]) {
-      layerAlternativeStyles[layerProps.name] = layerProps.alternativeStyles;
+  const addLayerStylePicker = function addLayerStylePicker(layerProps) {
+    if (!layerStylePicker[layerProps.name]) {
+      layerStylePicker[layerProps.name] = layerProps.stylePicker;
     }
   };
 
   const addLayer = function addLayer(layerProps) {
     const layer = Layer(layerProps, this);
-    addLayerAlternativeStyles(layerProps);
+    addLayerStylePicker(layerProps);
     map.addLayer(layer);
     this.dispatch('addlayer', {
       layerName: layerProps.name
@@ -596,7 +596,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     getSearchableLayers,
     getSize,
     getLayer,
-    getLayerAlternativeStyles,
+    getLayerStylePicker,
     getLayers,
     getLayersByProperty,
     getMap,

From e863905c116d08fbf2aa737b0cef81835d458cfd Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Mon, 28 Feb 2022 17:23:43 +0100
Subject: [PATCH 08/17] Icon border to indicate layer has stylePicker

---
 scss/_stylepicker.scss         | 4 ++++
 src/controls/legend/overlay.js | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/scss/_stylepicker.scss b/scss/_stylepicker.scss
index c67c1aaa2..45518b6c2 100644
--- a/scss/_stylepicker.scss
+++ b/scss/_stylepicker.scss
@@ -15,4 +15,8 @@
 
 .o-stylepicker .dropdown li:hover {
   color: $grey-darker;
+}
+
+.o-stylepicker-layerIcon {
+  border: $blue solid 1px;
 }
\ No newline at end of file
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index f70f832ee..8069f72bf 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -19,6 +19,7 @@ const OverlayLayer = function OverlayLayer(options) {
   let ButtonsHtml;
   let layerList;
 
+  const hasStylePicker = viewer.getLayerStylePicker(layer).length > 0;
   const layerIconCls = 'round compact icon-small light relative no-shrink';
   const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim();
   const title = layer.get('title') || 'Titel saknas';
@@ -59,7 +60,7 @@ const OverlayLayer = function OverlayLayer(options) {
   };
 
   const layerIcon = Button({
-    cls: `${headerIconClass} ${layerIconCls}`,
+    cls: `${headerIconClass} ${layerIconCls} ${hasStylePicker ? 'o-stylepicker-layerIcon' : ''}`,
     click() {
       const eventOverlayProps = new CustomEvent('overlayproperties', {
         bubbles: true,
@@ -69,10 +70,9 @@ const OverlayLayer = function OverlayLayer(options) {
       });
       document.getElementById(this.getId()).dispatchEvent(eventOverlayProps);
     },
-    iconStyle: { border: '2px solid green' },
     style: {
-      height: '1.5rem',
-      width: '1.5rem'
+      height: 'calc(1.5rem + 2px)',
+      width: 'calc(1.5rem + 2px)'
     },
     ariaLabel: 'Lager ikon',
     icon: headerIcon,

From 603693d654a5f3c2489c94395547b53f48f0f9b5 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Tue, 1 Mar 2022 14:55:31 +0100
Subject: [PATCH 09/17] Update style bug

---
 src/controls/legend/overlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index 8069f72bf..d1bbde103 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -144,7 +144,7 @@ const OverlayLayer = function OverlayLayer(options) {
     let newIcon = HeaderIcon(newStyle, opacity);
     headerIconClass = !newIcon ? iconCls : headerIconCls;
     newIcon = !newIcon ? icon : newIcon;
-    layerIconCmp.className = `${headerIconClass} ${layerIconCls}`;
+    layerIconCmp.className = `${headerIconClass} ${layerIconCls} ${hasStylePicker ? 'o-stylepicker-layerIcon' : ''}`;
     layerIcon.dispatch('change', { icon: newIcon });
   };
 

From 142377507d77816302ff4a188a504557d7c0685f Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 2 Mar 2022 09:09:55 +0100
Subject: [PATCH 10/17] Icon border focus fix

---
 scss/_stylepicker.scss         |  4 ----
 scss/ui/_button.scss           | 24 ++++++++++++++++++++++++
 src/controls/legend/overlay.js |  4 ++--
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/scss/_stylepicker.scss b/scss/_stylepicker.scss
index 45518b6c2..c67c1aaa2 100644
--- a/scss/_stylepicker.scss
+++ b/scss/_stylepicker.scss
@@ -15,8 +15,4 @@
 
 .o-stylepicker .dropdown li:hover {
   color: $grey-darker;
-}
-
-.o-stylepicker-layerIcon {
-  border: $blue solid 1px;
 }
\ No newline at end of file
diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
index e0b9489f9..584c7a6b9 100644
--- a/scss/ui/_button.scss
+++ b/scss/ui/_button.scss
@@ -87,6 +87,11 @@ button {
     background-color: $grey-lightest;
   }
 
+  &.style-picker {
+    background-color: $light-color;
+    border: $blue solid 1px;
+  }
+
   &.border {
     border: 2px solid $white;
 
@@ -184,6 +189,10 @@ button:hover,
   &.grey-lightest:hover {
     background-color: $grey-lighter;
   }
+
+  &.style-picker:hover {
+    background-color: $grey-lightest;
+  }
 }
 
 button:focus,
@@ -218,6 +227,11 @@ button:focus,
     border: 1px solid $black;
   }
 
+  &.style-picker:focus {
+    background-color: $grey-light;
+    border: $blue solid 1px;
+  }
+
   &.icon-small:focus {
     border: 1px solid $black;
   }
@@ -279,6 +293,16 @@ button:focus:not(:focus-visible),
   &.icon-smallest:focus:not(:focus-visible) {
     border: 0;
   }
+
+  &.style-picker:focus:not(:focus-visible) {
+    background-color: $light-color;
+    border: $blue solid 1px;
+  }
+
+  &.style-picker:focus:not([class*='icon']):not(:focus-visible) {
+    background-color: $grey-lighter;
+    border: $blue solid 1px;
+  }
 }
 
 button.active,
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index 07a215d0e..dbd055363 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -21,7 +21,7 @@ const OverlayLayer = function OverlayLayer(options) {
   let layerList;
 
   const hasStylePicker = viewer.getLayerStylePicker(layer).length > 0;
-  const layerIconCls = 'round compact icon-small light relative no-shrink';
+  const layerIconCls = `round compact icon-small relative no-shrink ${hasStylePicker ? 'style-picker' : 'light'}`;
   const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim();
   const title = layer.get('title') || 'Titel saknas';
   const name = layer.get('name');
@@ -70,7 +70,7 @@ const OverlayLayer = function OverlayLayer(options) {
   };
 
   const layerIcon = Button({
-    cls: `${headerIconClass} ${layerIconCls} ${hasStylePicker ? 'o-stylepicker-layerIcon' : ''}`,
+    cls: `${headerIconClass} ${layerIconCls}`,
     click() {
       if (!secure) {
         toggleVisible(layer.getVisible());

From 2d04cf67c5a8fa11fbb095ef0f38cb9146106299 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Thu, 3 Mar 2022 15:08:47 +0100
Subject: [PATCH 11/17] fix icon background

---
 scss/ui/_button.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
index 584c7a6b9..bf40174ae 100644
--- a/scss/ui/_button.scss
+++ b/scss/ui/_button.scss
@@ -88,7 +88,6 @@ button {
   }
 
   &.style-picker {
-    background-color: $light-color;
     border: $blue solid 1px;
   }
 

From adf70174d998fd184844a5d41ae952019d06886a Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Thu, 31 Mar 2022 10:35:37 +0200
Subject: [PATCH 12/17] Icon hover css

---
 scss/ui/_button.scss           | 7 -------
 src/controls/legend/overlay.js | 2 +-
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
index bf40174ae..273460ea3 100644
--- a/scss/ui/_button.scss
+++ b/scss/ui/_button.scss
@@ -188,10 +188,6 @@ button:hover,
   &.grey-lightest:hover {
     background-color: $grey-lighter;
   }
-
-  &.style-picker:hover {
-    background-color: $grey-lightest;
-  }
 }
 
 button:focus,
@@ -227,7 +223,6 @@ button:focus,
   }
 
   &.style-picker:focus {
-    background-color: $grey-light;
     border: $blue solid 1px;
   }
 
@@ -294,12 +289,10 @@ button:focus:not(:focus-visible),
   }
 
   &.style-picker:focus:not(:focus-visible) {
-    background-color: $light-color;
     border: $blue solid 1px;
   }
 
   &.style-picker:focus:not([class*='icon']):not(:focus-visible) {
-    background-color: $grey-lighter;
     border: $blue solid 1px;
   }
 }
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index dbd055363..69efb2569 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -21,7 +21,7 @@ const OverlayLayer = function OverlayLayer(options) {
   let layerList;
 
   const hasStylePicker = viewer.getLayerStylePicker(layer).length > 0;
-  const layerIconCls = `round compact icon-small relative no-shrink ${hasStylePicker ? 'style-picker' : 'light'}`;
+  const layerIconCls = `round compact icon-small relative no-shrink light ${hasStylePicker ? 'style-picker' : ''}`;
   const cls = `${clsSettings} flex row align-center padding-left padding-right item`.trim();
   const title = layer.get('title') || 'Titel saknas';
   const name = layer.get('name');

From 84d72995412822c07fb8d9f43dc6d9f94c4ecfb4 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Mon, 11 Apr 2022 10:48:48 +0200
Subject: [PATCH 13/17] Add label to style picker

---
 scss/_stylepicker.scss                   |  6 +++++-
 scss/ui/_button.scss                     | 16 ----------------
 src/controls/legend/overlay.js           |  2 +-
 src/controls/legend/overlayproperties.js |  8 ++++++--
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/scss/_stylepicker.scss b/scss/_stylepicker.scss
index c67c1aaa2..343d5efa4 100644
--- a/scss/_stylepicker.scss
+++ b/scss/_stylepicker.scss
@@ -1,11 +1,15 @@
 .o-stylepicker {
   height: 1.25rem;
   margin-right: 5px;
-  margin-top: 1.25rem;
   margin-bottom: 1.25rem;
   min-width: 110px;
 }
 
+.o-stylepicker-header {
+  margin-right: 5px;
+  margin-top: 1.25rem;
+}
+
 .o-stylepicker button {
   border-radius: 10px;
   font-family: Arial, 'Helvetica Neue', sans-serif;
diff --git a/scss/ui/_button.scss b/scss/ui/_button.scss
index c6f2b81d7..a4f1331c1 100644
--- a/scss/ui/_button.scss
+++ b/scss/ui/_button.scss
@@ -87,10 +87,6 @@ button {
     background-color: $grey-lightest;
   }
 
-  &.style-picker {
-    border: $blue solid 1px;
-  }
-
   &.border {
     border: 2px solid $white;
 
@@ -222,10 +218,6 @@ button:focus,
     border: 1px solid $black;
   }
 
-  &.style-picker:focus {
-    border: $blue solid 1px;
-  }
-
   &.icon-small:focus {
     border: 1px solid $black;
   }
@@ -291,14 +283,6 @@ button:focus:not(:focus-visible),
   &.icon-smallest:focus:not(:focus-visible) {
     border: 0;
   }
-
-  &.style-picker:focus:not(:focus-visible) {
-    border: $blue solid 1px;
-  }
-
-  &.style-picker:focus:not([class*='icon']):not(:focus-visible) {
-    border: $blue solid 1px;
-  }
 }
 
 button.active,
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
index 1b2685362..a7cc57d47 100644
--- a/src/controls/legend/overlay.js
+++ b/src/controls/legend/overlay.js
@@ -247,7 +247,7 @@ const OverlayLayer = function OverlayLayer(options) {
     let newIcon = HeaderIcon(newStyle, opacity);
     headerIconClass = !newIcon ? iconCls : headerIconCls;
     newIcon = !newIcon ? icon : newIcon;
-    layerIconCmp.className = `${headerIconClass} ${layerIconCls} ${hasStylePicker ? 'o-stylepicker-layerIcon' : ''}`;
+    layerIconCmp.className = `${headerIconClass} ${layerIconCls}`;
     layerIcon.dispatch('change', { icon: newIcon });
   };
 
diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index be3f77c6d..3b162aea1 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -58,7 +58,8 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   }
 
   function renderStyleSelection() {
-    return hasStylePicker() ? styleSelection.render() : '';
+    const html = `<div class="o-stylepicker-header text-small padding-small">Välj stil</div>${styleSelection.render()}`;
+    return hasStylePicker() ? html : '';
   }
 
   function getStyleDisplayName(styleName) {
@@ -116,9 +117,12 @@ const OverlayProperties = function OverlayProperties(options = {}) {
       }
       if (hasStylePicker()) {
         styleSelection.setItems(stylePicker.map(altStyle => altStyle.title));
-        document.getElementById(styleSelection.getId()).addEventListener('dropdown:select', (evt) => {
+        const styleSelectionEl = document.getElementById(styleSelection.getId());
+        styleSelectionEl.addEventListener('dropdown:select', (evt) => {
           onSelectStyle(evt.target.textContent);
         });
+        styleSelectionEl.setAttribute('aria-label', 'Välj stil');
+        styleSelectionEl.setAttribute('aria-labelledby', 'Välj stil');
       }
     },
     render() {

From c50d62dd775ac125e38f947ae545bdf952e0cd8e Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Tue, 19 Apr 2022 15:35:03 +0200
Subject: [PATCH 14/17] fix for clusterStyle and mapstate

---
 src/controls/legend/overlayproperties.js | 6 ++++--
 src/permalink/permalinkparser.js         | 9 ++++++++-
 src/permalink/permalinkstore.js          | 2 ++
 src/viewer.js                            | 6 ++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index 3b162aea1..1fa7c5f14 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -68,11 +68,13 @@ const OverlayProperties = function OverlayProperties(options = {}) {
   }
 
   const onSelectStyle = (styleTitle) => {
-    const altStyle = stylePicker.find(s => s.title === styleTitle);
+    const altStyleIndex = stylePicker.findIndex(s => s.title === styleTitle);
+    const altStyle = stylePicker[altStyleIndex];
     styleSelection.setButtonText(styleTitle);
-    const newStyle = Style.createStyle({ style: altStyle.style, viewer });
+    const newStyle = Style.createStyle({ style: altStyle.style, clusterStyleName: altStyle.clusterStyle, viewer });
     const legendCmp = document.getElementById(legendComponent.getId());
     legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity);
+    layer.setProperties({ altStyleIndex });
     layer.setProperties({ styleName: altStyle.style });
     layer.setStyle(newStyle);
     layer.dispatchEvent('change:style');
diff --git a/src/permalink/permalinkparser.js b/src/permalink/permalinkparser.js
index a3b82da4b..f991daff6 100644
--- a/src/permalink/permalinkparser.js
+++ b/src/permalink/permalinkparser.js
@@ -13,6 +13,10 @@ const layerModel = {
   o: {
     name: 'opacity',
     dataType: 'number'
+  },
+  sn: {
+    name: 'altStyleIndex',
+    dataType: 'number'
   }
 };
 
@@ -31,12 +35,15 @@ const layers = function layers(layersStr) {
     });
     Object.getOwnPropertyNames(layerObject).forEach((prop) => {
       const val = layerObject[prop];
-      if (Object.prototype.hasOwnProperty.call(layerModel, prop) && prop !== 'o') {
+      if (Object.prototype.hasOwnProperty.call(layerModel, prop) && prop !== 'o' && prop !== 'sn') {
         const attribute = layerModel[prop];
         obj[attribute.name] = urlparser.strBoolean(val);
       } else if (prop === 'o') {
         const attribute = layerModel[prop];
         obj[attribute.name] = Number(val) / 100;
+      } else if (prop === 'sn') {
+        const attribute = layerModel[prop];
+        obj[attribute.name] = Number(val);
       } else {
         obj[prop] = val;
       }
diff --git a/src/permalink/permalinkstore.js b/src/permalink/permalinkstore.js
index e6ff7f480..976b438a3 100644
--- a/src/permalink/permalinkstore.js
+++ b/src/permalink/permalinkstore.js
@@ -11,6 +11,8 @@ function getSaveLayers(layers) {
     saveLayer.v = layer.getVisible() === true ? 1 : 0;
     saveLayer.s = layer.get('legend') === true ? 1 : 0;
     saveLayer.o = Number(layer.get('opacity')) * 100;
+    // Only get style for layer styles that have changed
+    if (layer.get('altStyleIndex') > 0) saveLayer.sn = layer.get('altStyleIndex');
     if (saveLayer.s || saveLayer.v) {
       saveLayer.name = layer.get('name');
       if (saveLayer.name !== 'measure') {
diff --git a/src/viewer.js b/src/viewer.js
index e60e0d6aa..17ed2dfba 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -328,6 +328,12 @@ const Viewer = function Viewer(targetOption, options = {}) {
             visible: false,
             legend: false
           };
+          // Apply changed style
+          if (savedLayerProps[layerName] && savedLayerProps[layerName].altStyleIndex > 0) {
+            const altStyle = initialProps.stylePicker[savedLayerProps[layerName].altStyleIndex];
+            savedProps.clusterStyle = altStyle.clusterStyle;
+            savedProps.style = altStyle.style;
+          }
           savedProps.name = initialProps.name;
           const mergedProps = Object.assign({}, initialProps, savedProps);
           acc.push(mergedProps);

From 887a8e6858d4e3d369398c046ca633d240cff75c Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 20 Apr 2022 08:48:11 +0200
Subject: [PATCH 15/17] Trying the easier fix

---
 src/controls/legend/overlayproperties.js | 1 +
 src/viewer.js                            | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index 1fa7c5f14..cd193c6a6 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -74,6 +74,7 @@ const OverlayProperties = function OverlayProperties(options = {}) {
     const newStyle = Style.createStyle({ style: altStyle.style, clusterStyleName: altStyle.clusterStyle, viewer });
     const legendCmp = document.getElementById(legendComponent.getId());
     legendCmp.innerHTML = Legend(viewer.getStyle(altStyle.style), opacity);
+    if (!layer.get('defaultStyle')) layer.setProperties({ defaultStyle: layer.get('styleName') });
     layer.setProperties({ altStyleIndex });
     layer.setProperties({ styleName: altStyle.style });
     layer.setStyle(newStyle);
diff --git a/src/viewer.js b/src/viewer.js
index 17ed2dfba..6277a2a5c 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -329,10 +329,11 @@ const Viewer = function Viewer(targetOption, options = {}) {
             legend: false
           };
           // Apply changed style
-          if (savedLayerProps[layerName] && savedLayerProps[layerName].altStyleIndex > 0) {
+          if (savedLayerProps[layerName] && savedLayerProps[layerName].altStyleIndex > -1) {
             const altStyle = initialProps.stylePicker[savedLayerProps[layerName].altStyleIndex];
             savedProps.clusterStyle = altStyle.clusterStyle;
             savedProps.style = altStyle.style;
+            savedProps.defaultStyle = initialProps.style;
           }
           savedProps.name = initialProps.name;
           const mergedProps = Object.assign({}, initialProps, savedProps);

From 34b0b184969de20ee96d4dd7256ffe444195f4c3 Mon Sep 17 00:00:00 2001
From: Markus Polleryd <markus.polleryd@decerno.se>
Date: Wed, 20 Apr 2022 11:32:08 +0200
Subject: [PATCH 16/17] Correct check if layer style has changed

---
 src/permalink/permalinkstore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/permalink/permalinkstore.js b/src/permalink/permalinkstore.js
index 976b438a3..c64cc6cb2 100644
--- a/src/permalink/permalinkstore.js
+++ b/src/permalink/permalinkstore.js
@@ -12,7 +12,7 @@ function getSaveLayers(layers) {
     saveLayer.s = layer.get('legend') === true ? 1 : 0;
     saveLayer.o = Number(layer.get('opacity')) * 100;
     // Only get style for layer styles that have changed
-    if (layer.get('altStyleIndex') > 0) saveLayer.sn = layer.get('altStyleIndex');
+    if (layer.get('defaultStyle') && layer.get('defaultStyle') !== layer.get('styleName')) saveLayer.sn = layer.get('altStyleIndex');
     if (saveLayer.s || saveLayer.v) {
       saveLayer.name = layer.get('name');
       if (saveLayer.name !== 'measure') {

From 0292b8f26d2d5bdb593fbf708c7b10f7ce7e755e Mon Sep 17 00:00:00 2001
From: asemoller <ase.moller@sigtuna.se>
Date: Tue, 31 May 2022 15:31:55 +0200
Subject: [PATCH 17/17] Added ariaLabel to the component and removed
 aria-labelledby

---
 src/controls/legend/overlayproperties.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/controls/legend/overlayproperties.js b/src/controls/legend/overlayproperties.js
index cd193c6a6..5c9ae276f 100644
--- a/src/controls/legend/overlayproperties.js
+++ b/src/controls/legend/overlayproperties.js
@@ -90,7 +90,8 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         buttonCls: 'bg-white border text-black box-shadow',
         buttonTextCls: 'text-smaller',
         text: getStyleDisplayName(layer.get('styleName')),
-        buttonIconCls: 'black'
+        buttonIconCls: 'black',
+        ariaLabel: 'Välj stil'
       });
       const components = [transparencySlider];
       if (hasStylePicker()) {
@@ -124,8 +125,6 @@ const OverlayProperties = function OverlayProperties(options = {}) {
         styleSelectionEl.addEventListener('dropdown:select', (evt) => {
           onSelectStyle(evt.target.textContent);
         });
-        styleSelectionEl.setAttribute('aria-label', 'Välj stil');
-        styleSelectionEl.setAttribute('aria-labelledby', 'Välj stil');
       }
     },
     render() {