Make LAYERS object hierarchical.

(First the MVT basename, then feature layernames.)  More refactoring
(such as consolidation of LAYERS/STYLES/mapLayers) would be nice, but
not worth doing at the moment since we're planing to switch to WebGL
rendering once https://github.com/openlayers/openlayers/issues/15807
and https://github.com/openlayers/openlayers/issues/16246 are fixed.

1 files changed, 1912 insertions, 1883 deletions

diff --git a/main.js b/main.js
index 7327034..1c9fbab 100644
--- a/main.js
+++ b/main.js
@@ -724,1892 +724,1916 @@ const ageFilterSettings = (function() {
 })();
 
 /* Layer style definitions */
-/* TODO: this should really be refactored… */
-const LAYERS = {
-  'mrr.appr_ec': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 22,
-          fill: new Fill({
-            color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [151, 173, 23, 1],
-          }),
-        });
-      }),
-  },
-  'mrr.appl_ec': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 25,
-          fill: new Fill({
-            color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [197, 14, 31, 1],
-            lineDash: width >= 1.5 ? [2 * width] : undefined,
-          }),
-        });
-      }),
-  },
-  'mrr.appr_met': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 24,
-          fill: new Fill({
-            color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [151, 173, 23, 1],
-          }),
-        });
-      }),
-  },
-  'mrr.appl_met': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 26,
-          fill: new Fill({
-            color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [197, 14, 31, 1],
-            lineDash: width >= 1.5 ? [2 * width] : undefined,
-          }),
-        });
-      }),
-  },
-  'mrr.appr_ogd': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 24,
-          fill: new Fill({
-            color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [151, 173, 23, 1],
-          }),
-        });
-      }),
-  },
-  'mrr.appl_ogd': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 26,
-          fill: new Fill({
-            color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [197, 14, 31, 1],
-            lineDash: width >= 1.5 ? [2 * width] : undefined,
-          }),
-        });
-      }),
-  },
-  'mrr.appr_dl': {
-    legend: { zoomLevel: 4 },
-    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 20,
-          fill: new Fill({
-            color: [228, 53, 45, Math.max((.2-1)/6 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [151, 173, 23, 1],
-          }),
-        });
-      }),
+/* TODO: this should really be refactored, but probably not worth doing before the switch to
+ * WebGL, which is currently blocking on https://github.com/openlayers/openlayers/issues/15807
+ * and https://github.com/openlayers/openlayers/issues/16246 */
+const LAYERS = Object.seal({
+  mrr: {
+    appr_ec: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 22,
+            fill: new Fill({
+              color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [151, 173, 23, 1],
+            }),
+          });
+        }),
+    },
+    appl_ec: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 25,
+            fill: new Fill({
+              color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [197, 14, 31, 1],
+              lineDash: width >= 1.5 ? [2 * width] : undefined,
+            }),
+          });
+        }),
+    },
+    appr_met: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 24,
+            fill: new Fill({
+              color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [151, 173, 23, 1],
+            }),
+          });
+        }),
+    },
+    appl_met: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 26,
+            fill: new Fill({
+              color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [197, 14, 31, 1],
+              lineDash: width >= 1.5 ? [2 * width] : undefined,
+            }),
+          });
+        }),
+    },
+    appr_ogd: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 24,
+            fill: new Fill({
+              color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [151, 173, 23, 1],
+            }),
+          });
+        }),
+    },
+    appl_ogd: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 26,
+            fill: new Fill({
+              color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [197, 14, 31, 1],
+              lineDash: width >= 1.5 ? [2 * width] : undefined,
+            }),
+          });
+        }),
+    },
+    appr_dl: {
+      legend: { zoomLevel: 4 },
+      style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 20,
+            fill: new Fill({
+              color: [228, 53, 45, Math.max((.2-1)/6 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [151, 173, 23, 1],
+            }),
+          });
+        }),
+    },
   },
 
-  'svk.ledningar': {
-    legend: { zoomLevel: 5, type: 'linestring', reuse_canvas: true },
-    style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
-        return new Style({
-          zIndex: 52,
-          stroke: new Stroke({
-            color: 'black',
-            width: width,
-          }),
-        });
-      }),
-  },
-  'svk.stolpar': {
-    legend: { zoomLevel: 5, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, undefined]
-      .concat([3, 4, 5, 6, 8, 10, 15].map(function(radius) {
+  svk: {
+    ledningar: {
+      legend: { zoomLevel: 5, type: 'linestring', reuse_canvas: true },
+      style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
           return new Style({
-            zIndex: 51,
-            image: new CircleStyle({
+            zIndex: 52,
+            stroke: new Stroke({
+              color: 'black',
+              width: width,
+            }),
+          });
+        }),
+    },
+    stolpar: {
+      legend: { zoomLevel: 5, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, undefined]
+        .concat([3, 4, 5, 6, 8, 10, 15].map(function(radius) {
+            return new Style({
+              zIndex: 51,
+              image: new CircleStyle({
+                radius: radius,
+                fill: new Fill({
+                  color: 'black',
+                }),
+              }),
+            });
+        })),
+    },
+    transmissionsnatsprojekt: {
+      legend: { zoomLevel: 5, type: 'linestring' },
+      style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
+          return new Style({
+            zIndex: 53,
+            stroke: new Stroke({
+              color: 'black',
+              width: width,
+              lineDash: [4 * width],
+            }),
+          });
+        }),
+    },
+    stationer: {
+      legend: { zoomLevel: 3, type: 'point' },
+      style: [3, 4, 5, 6, 7, 8.5, 10].map(function(radius) {
+          return new Style({
+            zIndex: 50,
+            image: new RegularShape({
               radius: radius,
+              points: 4,
+              angle: Math.PI/4,
               fill: new Fill({
                 color: 'black',
               }),
             }),
           });
-      })),
-  },
-  'svk.transmissionsnatsprojekt': {
-    legend: { zoomLevel: 5, type: 'linestring' },
-    style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
-        return new Style({
-          zIndex: 53,
-          stroke: new Stroke({
-            color: 'black',
-            width: width,
-            lineDash: [4 * width],
-          }),
-        });
-      }),
-  },
-  'svk.stationer': {
-    legend: { zoomLevel: 3, type: 'point' },
-    style: [3, 4, 5, 6, 7, 8.5, 10].map(function(radius) {
-        return new Style({
-          zIndex: 50,
-          image: new RegularShape({
-            radius: radius,
-            points: 4,
-            angle: Math.PI/4,
+        })
+        .concat([.5, 1, 1.5, 2, 2].map(function(width) {
+          return new Style({
+            zIndex: 50,
             fill: new Fill({
-              color: 'black',
+              color: 'rgba(128, 128, 128, .7)',
             }),
-          }),
-        });
-      })
-      .concat([.5, 1, 1.5, 2, 2].map(function(width) {
-        return new Style({
-          zIndex: 50,
-          fill: new Fill({
-            color: 'rgba(128, 128, 128, .7)',
-          }),
-          stroke: new Stroke({
-            width: width,
-            color: 'rgb(0, 0, 0)',
-          }),
-        });
-      })),
+            stroke: new Stroke({
+              width: width,
+              color: 'rgb(0, 0, 0)',
+            }),
+          });
+        })),
+    },
   },
 
-  'vbk.area_current': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: [168, 198, 223, Math.max((.2-1)/8 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [56, 96, 130, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.area_notcurrent': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: [222, 163, 199, Math.max((.2-1)/8 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [148, 55, 112, 1],
-            lineDash: width >= 1.5 ? [2 * width] : undefined,
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_completed': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 17,
-          fill: new Fill({
-            color: [38, 107, 29, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [38, 107, 29, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_approved': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 16,
-          fill: new Fill({
-            color: [56, 160, 44, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [56, 160, 44, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_amended': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
-        patternCanvas.width = width/2;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(247, 105, 162, 1)';
-        patternContext.beginPath();
-        patternContext.arc(.75*patternCanvas.width, .75*patternCanvas.height, 1.5*w, 0, 2*Math.PI, true);
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 17,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: 2*w,
-            color: [247, 105, 162, 1],
-            lineDash: [8 * w],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_rejected': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 11,
-          fill: new Fill({
-            color: [227, 26, 28, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [227, 26, 28, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_appealed': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 15,
-          fill: new Fill({
-            color: [177, 88, 40, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [177, 88, 40, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_applied': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 14,
-          fill: new Fill({
-            color: [255, 127, 0, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [255, 128, 0, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_consultation': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 13,
-          fill: new Fill({
-            color: [254, 217, 118, .65],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [254, 183, 82, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_investigation': {
-    legend: { zoomLevel: 1 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
-        patternCanvas.width = width*2;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(68, 90, 166, 1)';
-        patternContext.lineWidth = w;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 12,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: 2*w,
-            color: [68, 90, 166, 1],
-            lineDash: [8 * w],
-          }),
-        });
-      }),
-  },
-  'vbk.offshore_revoked': {
-    legend: { zoomLevel: 1 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: [105, 61, 154, .5],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [105, 62, 153, 1],
-          }),
-        });
-      }),
-  },
-  'vbk.station_completed': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-completed.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_processed': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-processed.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_approved': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-approved.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_revoked': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-revoked.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_rejected': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-rejected.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_dismounted': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-dismounted.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
-  },
-  'vbk.station_appealed': {
-    legend: { zoomLevel: 7, type: 'point' },
-    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
-        return scale === undefined ? undefined : new Style({
-          zIndex: 99,
-          image: new Icon({
-            src: '/assets/icons/wind-turbine-appealed.svg',
-            declutter: 'none',
-            scale: scale,
-          }),
-        });
-      }),
+  vbk: {
+    area_current: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 10,
+            fill: new Fill({
+              color: [168, 198, 223, Math.max((.2-1)/8 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [56, 96, 130, 1],
+            }),
+          });
+        }),
+    },
+    area_notcurrent: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+          return new Style({
+            zIndex: 10,
+            fill: new Fill({
+              color: [222, 163, 199, Math.max((.2-1)/8 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [148, 55, 112, 1],
+              lineDash: width >= 1.5 ? [2 * width] : undefined,
+            }),
+          });
+        }),
+    },
+    offshore_completed: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 17,
+            fill: new Fill({
+              color: [38, 107, 29, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [38, 107, 29, 1],
+            }),
+          });
+        }),
+    },
+    offshore_approved: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 16,
+            fill: new Fill({
+              color: [56, 160, 44, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [56, 160, 44, 1],
+            }),
+          });
+        }),
+    },
+    offshore_amended: {
+      legend: { zoomLevel: 2 },
+      style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
+          const patternCanvas = document.createElement('canvas');
+          const patternContext = patternCanvas.getContext('2d');
+          const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
+          patternCanvas.width = width/2;
+          patternCanvas.height = patternCanvas.width;
+          patternContext.fillStyle = 'rgba(247, 105, 162, 1)';
+          patternContext.beginPath();
+          patternContext.arc(.75*patternCanvas.width, .75*patternCanvas.height, 1.5*w, 0, 2*Math.PI, true);
+          patternContext.fill();
+
+          const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d');
+          return new Style({
+            zIndex: 17,
+            fill: new Fill({
+              color: context.createPattern(patternCanvas, 'repeat'),
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: 2*w,
+              color: [247, 105, 162, 1],
+              lineDash: [8 * w],
+            }),
+          });
+        }),
+    },
+    offshore_rejected: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 11,
+            fill: new Fill({
+              color: [227, 26, 28, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [227, 26, 28, 1],
+            }),
+          });
+        }),
+    },
+    offshore_appealed: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 15,
+            fill: new Fill({
+              color: [177, 88, 40, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [177, 88, 40, 1],
+            }),
+          });
+        }),
+    },
+    offshore_applied: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 14,
+            fill: new Fill({
+              color: [255, 127, 0, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [255, 128, 0, 1],
+            }),
+          });
+        }),
+    },
+    offshore_consultation: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 13,
+            fill: new Fill({
+              color: [254, 217, 118, .65],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [254, 183, 82, 1],
+            }),
+          });
+        }),
+    },
+    offshore_investigation: {
+      legend: { zoomLevel: 1 },
+      style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
+          const patternCanvas = document.createElement('canvas');
+          const patternContext = patternCanvas.getContext('2d');
+          const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
+          patternCanvas.width = width*2;
+          patternCanvas.height = patternCanvas.width;
+          patternContext.fillStyle = 'transparent';
+          patternContext.strokeStyle = 'rgba(68, 90, 166, 1)';
+          patternContext.lineWidth = w;
+          patternContext.beginPath();
+          patternContext.moveTo(0, patternCanvas.height);
+          patternContext.lineTo(patternCanvas.width, 0);
+          patternContext.stroke();
+          patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
+          patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
+          patternContext.stroke();
+          patternContext.moveTo(0, 2*patternCanvas.height);
+          patternContext.lineTo(2*patternCanvas.width, 0);
+          patternContext.stroke();
+
+          const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d');
+          return new Style({
+            zIndex: 12,
+            fill: new Fill({
+              color: context.createPattern(patternCanvas, 'repeat'),
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: 2*w,
+              color: [68, 90, 166, 1],
+              lineDash: [8 * w],
+            }),
+          });
+        }),
+    },
+    offshore_revoked: {
+      legend: { zoomLevel: 1 },
+      style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
+          return new Style({
+            zIndex: 10,
+            fill: new Fill({
+              color: [105, 61, 154, .5],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [105, 62, 153, 1],
+            }),
+          });
+        }),
+    },
+    station_completed: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-completed.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_processed: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-processed.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_approved: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-approved.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_revoked: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-revoked.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_rejected: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-rejected.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_dismounted: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-dismounted.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
+    station_appealed: {
+      legend: { zoomLevel: 7, type: 'point' },
+      style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
+          return scale === undefined ? undefined : new Style({
+            zIndex: 99,
+            image: new Icon({
+              src: '/assets/icons/wind-turbine-appealed.svg',
+              declutter: 'none',
+              scale: scale,
+            }),
+          });
+        }),
+    },
   },
 
-  /* Documentation at
-   * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/utforda-avverkningar---produktbeskrivning.pdf
-   * */
-  'avverk.utford': {
-    legend: { zoomLevel: 7 },
-    style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [204, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  /* Documentation at
-   * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/yttre-granser-for-avverkningsanmalda-omraden---produktbeskrivning.pdf
-   * */
-  'avverk.anmald': {
-    legend: { zoomLevel: 7 },
-    style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
-        return new Style({
-          zIndex: 10,
-          fill: (width === undefined || width === 0) ?
-            new Fill({ color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)*.75] }) :
-            (function() {
-              const patternCanvas = document.createElement('canvas');
-              const patternContext = patternCanvas.getContext('2d');
-              const slope = 45 * Math.PI/180;
-              const spacing = z < 10 ? z*2 : 40;
-              const len = Math.hypot(1, slope);
-              const w = patternCanvas.width = Math.round(1/len + spacing);
-              const h = patternCanvas.height = Math.round(slope/len + spacing * slope);
-
-              patternContext.fillStyle = 'rgba(255, 102, 102, .1)';
-              patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
-              patternContext.strokeStyle = 'rgba(204, 0, 0, 1)';
-              patternContext.lineWidth = Math.max(1, width/2);
-              patternContext.beginPath();
-              patternContext.moveTo(0, h);
-              patternContext.lineTo(w, 0);
-              patternContext.moveTo(-w, h);
-              patternContext.lineTo(w, -h);
-              patternContext.moveTo(0, 2*h);
-              patternContext.lineTo(2*w, 0);
-              patternContext.stroke();
-
-              const canvas = document.createElement('canvas');
-              const context = canvas.getContext('2d');
-              return new Fill({ color: context.createPattern(patternCanvas, 'repeat') });
-            })(),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [204, 0, 0, 1],
-            lineDash: width >= 1.5 ? [2 * width] : undefined,
-          }),
-        });
-      }),
+  avverk: {
+    /* Documentation at
+     * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/utforda-avverkningar---produktbeskrivning.pdf
+     * */
+    utford: {
+      legend: { zoomLevel: 7 },
+      style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
+          return new Style({
+            zIndex: 10,
+            fill: new Fill({
+              color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [204, 0, 0, 1],
+            }),
+          });
+        }),
+    },
+    /* Documentation at
+     * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/yttre-granser-for-avverkningsanmalda-omraden---produktbeskrivning.pdf
+     * */
+    anmald: {
+      legend: { zoomLevel: 7 },
+      style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
+          return new Style({
+            zIndex: 10,
+            fill: (width === undefined || width === 0) ?
+              new Fill({ color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)*.75] }) :
+              (function() {
+                const patternCanvas = document.createElement('canvas');
+                const patternContext = patternCanvas.getContext('2d');
+                const slope = 45 * Math.PI/180;
+                const spacing = z < 10 ? z*2 : 40;
+                const len = Math.hypot(1, slope);
+                const w = patternCanvas.width = Math.round(1/len + spacing);
+                const h = patternCanvas.height = Math.round(slope/len + spacing * slope);
+
+                patternContext.fillStyle = 'rgba(255, 102, 102, .1)';
+                patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
+                patternContext.strokeStyle = 'rgba(204, 0, 0, 1)';
+                patternContext.lineWidth = Math.max(1, width/2);
+                patternContext.beginPath();
+                patternContext.moveTo(0, h);
+                patternContext.lineTo(w, 0);
+                patternContext.moveTo(-w, h);
+                patternContext.lineTo(w, -h);
+                patternContext.moveTo(0, 2*h);
+                patternContext.lineTo(2*w, 0);
+                patternContext.stroke();
+
+                const canvas = document.createElement('canvas');
+                const context = canvas.getContext('2d');
+                return new Fill({ color: context.createPattern(patternCanvas, 'repeat') });
+              })(),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [204, 0, 0, 1],
+              lineDash: width >= 1.5 ? [2 * width] : undefined,
+            }),
+          });
+        }),
+    },
   },
 
-  'skydd.tilltradesforbud': {
-    legend: { zoomLevel: 2 },
-    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
-        return new Style({
-          zIndex: 23,
-          fill: new Fill({
-            /* transparent fill so clicking the inside of the polygon triggers a popover */
-            /* XXX could also use a custom renderer but that doesn't seem to work */
-            color: [0, 0, 0, 0],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [255, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.nationalpark': {
-    legend: { zoomLevel: 1 },
-    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(0, 55, 0, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 22,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [0, 55, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturreservat': {
-    legend: { zoomLevel: 1 },
-    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 21,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [7, 181, 7, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturreservat_kommunalt': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, 0);
-        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, -patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, 0);
-        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 20,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [7, 181, 7, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturvardsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(176, 255, 176, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 19,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [176, 255, 176, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.djur_och_vaxtskyddsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(255, 255, 0, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 18,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [255, 255, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.kulturreservat': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(154, 102, 255, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 17,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [154, 102, 255, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.vattenskyddsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(0, 105, 212, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 16,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [0, 105, 212, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.landskapsbildsskyddsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(135, 110, 71, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 15,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [134, 110, 71, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.skogligt_biotopskyddsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(135, 90, 71, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 14,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [134, 90, 71, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.ovrigt_biotopskyddsomrade': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(255, 95, 0, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 13,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [255, 95, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturminne_yta': {
-    legend: { zoomLevel: 2 },
-    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(113, 0, 116, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(0, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 2*patternCanvas.height);
-        patternContext.lineTo(2*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 12,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
-            color: [134, 0, 116, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturminne_punkt': {
-    legend: { zoomLevel: 6, type: 'point' },
-    style: [undefined, undefined, undefined, undefined].concat([3, 4, 6, 8, 12, 16, 20, 24].map(function(width) {
-        return new Style({
-          zIndex: 12,
-          image: new CircleStyle({
-            radius: width,
+  skydd: {
+    tilltradesforbud: {
+      legend: { zoomLevel: 2 },
+      style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
+          return new Style({
+            zIndex: 23,
+            fill: new Fill({
+              /* transparent fill so clicking the inside of the polygon triggers a popover */
+              /* XXX could also use a custom renderer but that doesn't seem to work */
+              color: [0, 0, 0, 0],
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: width,
+              color: [255, 0, 0, 1],
+            }),
+          });
+        }),
+    },
+    nationalpark: {
+      legend: { zoomLevel: 1 },
+      style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
+          const patternCanvas = document.createElement('canvas');
+          const patternContext = patternCanvas.getContext('2d');
+          patternCanvas.width = width;
+          patternCanvas.height = patternCanvas.width;
+          patternContext.fillStyle = 'transparent';
+          patternContext.strokeStyle = 'rgba(0, 55, 0, 1)';
+          patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
+          patternContext.beginPath();
+          patternContext.moveTo(0, patternCanvas.height);
+          patternContext.lineTo(patternCanvas.width, 0);
+          patternContext.stroke();
+          patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
+          patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
+          patternContext.stroke();
+          patternContext.moveTo(0, 2*patternCanvas.height);
+          patternContext.lineTo(2*patternCanvas.width, 0);
+          patternContext.stroke();
+
+          const canvas = document.createElement('canvas');
+          const context = canvas.getContext('2d');
+          return new Style({
+            zIndex: 22,
+            fill: new Fill({
+              color: context.createPattern(patternCanvas, 'repeat'),
+            }),
+            stroke: width === 0 ? undefined : new Stroke({
+              width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
+              color: [0, 55, 0, 1],
+            }),
+          });