Undo splitting out to multiple files.

The reason is that we want the different modules to produce side-effects
(to avoid creating functions and keeping references to it) and we
therefore need to control the order in which they are inlined during
`vite build`.  Unfortunately this doesn't seem to be possible right now,
cf. https://github.com/storybookjs/storybook/issues/30768 .

This reverts commits 670bba058d83620abdb3e8db5fd4ea89dba08142,
05a018f27aba3a20fd581cb88daa8afbbd3407de and
0fc7bdd8bf374c36fa0ba27702d1fafed09277ac.

1 files changed, 0 insertions, 1908 deletions

diff --git a/src/layers.js b/src/layers.js
deleted file mode 100644
index 688bb44..0000000
--- a/src/layers.js
+++ /dev/null
@@ -1,1908 +0,0 @@
-/***********************************************************************
- * Copyright © 2024-2025 Guilhem Moulin <info@guilhem.se>
- * Vector and raster layer definitions
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU Affero General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU Affero General Public License for more details.
- *
- *  You should have received a copy of the GNU Affero General Public License
- *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
- **********************************************************************/
-
-import CircleStyle from 'ol/style/Circle.js';
-import Fill from 'ol/style/Fill.js';
-import Icon from 'ol/style/Icon.js';
-import RegularShape from 'ol/style/RegularShape.js';
-import Stroke from 'ol/style/Stroke.js';
-import Style from 'ol/style/Style.js';
-
-/* TODO: this should really be refactored… */
-export 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],
-          }),
-        });
-      }),
-  },
-
-  '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) {
-          return new Style({
-            zIndex: 51,
-            image: new CircleStyle({
-              radius: radius,
-              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,
-            fill: new Fill({
-              color: 'black',
-            }),
-          }),
-        });
-      })
-      .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)',
-          }),
-        });
-      })),
-  },
-
-  '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,
-          }),
-        });
-      }),
-  },
-
-  /* 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,
-          }),
-        });
-      }),
-  },
-
-  '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,
-            fill: new Fill({
-              color: 'rgba(113, 0, 116, .5)',
-            }),
-            stroke: new Stroke({
-              width: Math.log2(width)/2,
-              color: 'rgba(113, 0, 116, 1)',
-            }),
-          }),
-        });
-      }))
-  },
-  'skydd.interimistiskt_forbud': {
-    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(168, 0, 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: 11,
-          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: [168, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.fageldirektivet': {
-    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*2;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(230, 0, 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();
-        patternContext.beginPath();
-        patternContext.lineWidth *= 6;
-        patternContext.moveTo(-.5*patternCanvas.width, patternCanvas.height);
-        patternContext.lineTo(patternCanvas.width, -.5*patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(0, 1.5*patternCanvas.height);
-        patternContext.lineTo(1.5*patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [230, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.habitatdirektivet': {
-    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*2;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(0, 77, 168, 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();
-        patternContext.beginPath();
-        patternContext.lineWidth *= 6;
-        patternContext.moveTo(0, -.5*patternCanvas.height);
-        patternContext.lineTo(1.5*patternCanvas.width, patternCanvas.height);
-        patternContext.stroke();
-        patternContext.moveTo(-.5*patternCanvas.width, 0);
-        patternContext.lineTo(patternCanvas.width, 1.5*patternCanvas.height);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [0, 77, 168, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.helcom': {
-    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');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(130, 130, 130, 1)';
-        const r = z < 5 ? (z+1)*.75 : z*.5;
-        patternContext.beginPath();
-        patternContext.arc(.5*patternCanvas.width, .5*patternCanvas.height, r, 0, 2*Math.PI, true)
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 9,
-          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: [130, 130, 130, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.ramsar': {
-    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');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(195, 0, 255, 1)';
-        const r = z < 5 ? (z+1)*.75 : z*.5;
-        patternContext.beginPath();
-        patternContext.arc(.25*patternCanvas.width, .25*patternCanvas.height, r, 0, 2*Math.PI, true)
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 9,
-          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: [195, 0, 255, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.ospar': {
-    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');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(168, 0, 0, 1)';
-        const r = z < 5 ? (z+1)*.75 : z*.5;
-        patternContext.beginPath();
-        patternContext.arc(.25*patternCanvas.width, .75*patternCanvas.height, r, 0, 2*Math.PI, true)
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 9,
-          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: [168, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.varldsarv': {
-    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');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(168, 0, 0, 1)';
-        const r = z < 5 ? (z+1)*.75 : z*.5;
-        patternContext.beginPath();
-        patternContext.arc(.75*patternCanvas.width, .25*patternCanvas.height, r, 0, 2*Math.PI, true)
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 9,
-          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: [168, 0, 0, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.biosfarsomraden': {
-    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');
-        patternCanvas.width = width;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'rgba(131, 0, 219, 1)';
-        const r = z < 5 ? (z+1)*.75 : z*.5;
-        patternContext.beginPath();
-        patternContext.arc(.75*patternCanvas.width, .75*patternCanvas.height, r, 0, 2*Math.PI, true)
-        patternContext.fill();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 9,
-          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: [131, 0, 219, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturvardsavtal': {
-    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(255, 0, 197, 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 < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [255, 0, 197, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.naturvardsavtal_skogsstyrelsen': {
-    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, 0, 197, 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 < 4 ? .5 : z <= 5 ? 1 : 2,
-            color: [255, 0, 197, 1],
-          }),
-        });
-      }),
-  },
-  'skydd.atervatningsavtal': {
-    legend: { zoomLevel: 0 },
-    style: [0, 1, 2, 3, 4, 5, 6].map(function(width) {
-        return new Style({
-          zIndex: 5,
-          fill: new Fill({
-            color: [255, 115, 0, .4],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: .5,
-            color: [255, 115, 0, 1],
-          }),
-        });
-      })
-      .concat([7, 8, 9, 10, 11].map(function() {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = 16;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(255, 115, 0, 1)';
-        patternContext.lineWidth = 1;
-        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: 5,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: new Stroke({
-            width: 1.5,
-            color: [255, 115, 0, 1],
-          }),
-        });
-      })),
-  },
-  'nv.naturvarde_sks': {
-    legend: { zoomLevel: 0 },
-    style: [0, 1, 2, 3, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 6,
-          fill: new Fill({
-            color: [255, 170, 0, .2],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: .5,
-            color: [255, 170, 0, .8],
-          }),
-        });
-      })
-      .concat([6, 7, 8, 9, 10, 11].map(function() {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = 16;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(255, 170, 0, 1)';
-        patternContext.lineWidth = 1;
-        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: 6,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: new Stroke({
-            width: 1.5,
-            color: [255, 170, 0, 1],
-          }),
-        });
-      })),
-  },
-  'nv.nyckelbiotop': {
-    legend: { zoomLevel: 0 },
-    style: [0, 1, 2, 3, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 6,
-          fill: new Fill({
-            color: [217, 148, 9, .2],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: .5,
-            color: [217, 148, 9, .8],
-          }),
-        });
-      })
-      .concat([6, 7, 8, 9, 10, 11].map(function() {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = 16;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(217, 148, 9, 1)';
-        patternContext.lineWidth = 1;
-        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: 6,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: new Stroke({
-            width: 1.5,
-            color: [217, 148, 9, 1],
-          }),
-        });
-      })),
-  },
-  'nv.nyckelbiotop_storskogsbruk': {
-    legend: { zoomLevel: 0 },
-    style: [0, 1, 2, 3, 4, 5].map(function(width) {
-        return new Style({
-          zIndex: 6,
-          fill: new Fill({
-            color: [217, 148, 9, .2],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: .5,
-            color: [217, 148, 9, .8],
-          }),
-        });
-      })
-      .concat([6, 7, 8, 9, 10, 11].map(function() {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = 16;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(217, 148, 9, 1)';
-        patternContext.lineWidth = 1;
-        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: 6,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: new Stroke({
-            width: 1.5,
-            color: [217, 148, 9, 1],
-          }),
-        });
-      })),
-  },
-  'nv.sumpskog': {
-    legend: { zoomLevel: 5 },
-    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        const w = Math.max(1, width);
-        patternCanvas.width = z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 6 : 8;
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(158, 200, 215, 1)';
-        patternContext.lineWidth = w;
-        patternContext.beginPath();
-        patternContext.moveTo(0, 0);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 5,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: w/2,
-            color: [158, 200, 215, 1],
-          }),
-        });
-      }),
-  },
-  'nv.pagaende_naturreservatsbildning': {
-    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.setLineDash([width/4, width/4]);
-        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
-        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
-        patternContext.beginPath();
-        patternContext.moveTo(width/4, 0);
-        patternContext.lineTo(width/4, patternCanvas.height);
-        patternContext.stroke();
-        patternContext.beginPath();
-        patternContext.lineDashOffset = width/4;
-        patternContext.moveTo(3*width/4, 0);
-        patternContext.lineTo(3*width/4, patternCanvas.height);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 10,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 3 : 4,
-            color: [7, 181, 7, 1],
-            lineDash: [width/8, width/4],
-          }),
-        });
-      }),
-  },
-  'nv.snus': {
-    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: 4,
-          fill: new Fill({
-            color: [168,168,0,.2],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [168,77,0,.75],
-          }),
-        });
-      }),
-  },
-
-  'ri.naturvard': {
-    legend: { zoomLevel: 0 },
-    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(154, 230, 0, 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: 8,
-          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, 230, 0, 1],
-          }),
-        });
-      }),
-  },
-  'ri.friluftsliv': {
-    legend: { zoomLevel: 0 },
-    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, 127, 232, 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: 8,
-          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, 127, 232, 1],
-          }),
-        });
-      }),
-  },
-  'ri.rorligt_friluftsliv': {
-    legend: { zoomLevel: 0 },
-    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 = 'rgba(187, 227, 212, .25)';
-        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
-        patternContext.strokeStyle = 'rgba(56, 151, 117, 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: 8,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
-            color: [56, 151, 117, 1],
-            lineDash: [width/4, width/3],
-          }),
-        });
-      }),
-  },
-  'ri.obruten_kust': {
-    legend: { zoomLevel: 0 },
-    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 = 'rgba(227, 227, 187, .25)';
-        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
-        patternContext.strokeStyle = 'rgba(156, 158, 56, 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: 8,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
-            color: [156, 158, 56, 1],
-            lineDash: [width/4, width/3],
-          }),
-        });
-      }),
-  },
-  'ri.obrutet_fjall': {
-    legend: { zoomLevel: 0 },
-    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 = 'rgba(255, 255, 209, .25)';
-        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
-        patternContext.strokeStyle = 'rgba(219, 183, 60, 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: 8,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
-            color: [219, 183, 60, 1],
-            lineDash: [width/4, width/3],
-          }),
-        });
-      }),
-  },
-  'ri.skyddade_vattendrag': {
-    legend: { zoomLevel: 0 },
-    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
-      return new Style({
-        zIndex: 8,
-        fill: new Fill({
-          color: [102, 157, 240, .25],
-        }),
-        stroke: width === 0 ? undefined : new Stroke({
-          width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
-          color: [41, 109, 197, 1],
-          lineDash: [width/4, width/3],
-        }),
-      });
-    }),
-  },
-
-  'ren.betesomrade': {
-    legend: { zoomLevel: 0 },
-    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
-        return new Style({
-          zIndex: 4,
-          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: [179, 153, 102, 1],
-          }),
-        });
-      }),
-  },
-  'ren.flyttled': {
-    legend: { zoomLevel: 2, type: 'linestring' },
-    style: [.75, 1, 1.5, 2, 3, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
-        return new Style({
-          zIndex: 7,
-          stroke: new Stroke({
-            width: 2*width,
-            color: [119, 99, 59, 1],
-            lineDash: [4 * width],
-          }),
-        });
-      }),
-  },
-  'ren.riks_ren': {
-    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) {
-        const patternCanvas = document.createElement('canvas');
-        const patternContext = patternCanvas.getContext('2d');
-        patternCanvas.width = z < 4 ? 4 : z <= 5 ? 8 : Math.pow(2, Math.round(Math.log2(width) + 3));
-        patternCanvas.height = patternCanvas.width;
-        patternContext.fillStyle = 'transparent';
-        patternContext.strokeStyle = 'rgba(179, 153, 102, 1)';
-        patternContext.lineWidth = Math.max(1, width/2);
-        patternContext.beginPath();
-        patternContext.moveTo(0, 0);
-        patternContext.lineTo(patternCanvas.width, 0);
-        patternContext.stroke();
-
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        return new Style({
-          zIndex: 6,
-          fill: new Fill({
-            color: context.createPattern(patternCanvas, 'repeat'),
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [179, 153, 102, 1],
-          }),
-        });
-      }),
-  },
-  'ren.omr_riks': {
-    legend: { zoomLevel: 2 },
-    style: [.5, .5, 1, 1, 1, 1.5, 1.5, 1.5, 2, 2, 2, 2].map(function(width, z) {
-        return new Style({
-          zIndex: 5,
-          fill: new Fill({
-            color: [203, 190, 163, Math.max((.3-.5)/8 * z + .5, 0)],
-          }),
-          stroke: width === 0 ? undefined : new Stroke({
-            width: width,
-            color: [179, 153, 102, 1],
-          }),
-        });
-      }),
-  },
-
-  /* Documentation at
-   * https://www.smhi.se/polopoly_fs/1.34541!/dammprod%202013_3%2C%20beskrivning%2C%20SVAR2012_2.pdf
-   * */
-  'misc.dammar': {
-    legend: { zoomLevel: 5, type: 'point' },
-    style: [2, 3, 4, 4, 4, 6, 8, 8, 8, 10, 16, 32].map(function(width) {
-        return new Style({
-          zIndex: 59,
-          image: new CircleStyle({
-            radius: width,
-            fill: new Fill({
-              color: 'rgb(219, 30, 42)',
-            }),
-            stroke: new Stroke({
-              width: Math.log2(width) * 2/5,
-              color: 'rgb(128, 17, 25)',
-            }),
-          }),
-        });
-      }),
-  },
-
-  'misc.gigafactories': {
-    legend: { zoomLevel: 1, type: 'point' },
-    style: [4, 6, 7, 8, 10, 12].map(function(width) {
-        return new Style({
-          zIndex: 60,
-          image: new CircleStyle({
-            radius: width,
-            fill: new Fill({
-              color: 'rgb(152, 78, 163)',
-            }),
-            stroke: new Stroke({
-              width: Math.log2(width) * 2/5,
-              color: 'rgb(119, 61, 128)',
-            }),
-          }),
-        });
-      })
-      .concat([1.5, 2, 2, 2, 2, 2].map(function(width) {
-        return new Style({
-          zIndex: 58,
-          fill: new Fill({
-            color: 'rgba(152, 78, 163, .4)',
-          }),
-          stroke: new Stroke({
-            width: width,
-            color: 'rgb(119, 61, 128)',
-          }),
-        });
-      })),
-  },
-
-  'kskog.1' : { style: [ 56, 168,   0, .2] }, /* #1 Sannolikt kontinuitetsskog (preciserad) */
-  'kskog.2' : { style: [169,   0, 230, .2] }, /* #2 Sannolikt påverkad kontinuitetsskog (preciserad) */
-  'kskog.3' : { style: [152, 230,   0, .2] }, /* #3 Sannolikt kontinuitetsskog i fjällen (grövre precisering) */
-  'kskog.4' : { style: [ 76, 115, 0,   .2] }, /* #4 Potentiell kontinuitetsskog (2015) */
-};