Split `layers` object into separate file.

This rather large commit merely moves the object declaration into the
new file and adjusts the import declarations accordingly.  This will
serve as basis for a future refactoring commit.

1 files changed, 3295 insertions, 0 deletions

diff --git a/src/layers.js b/src/layers.js
new file mode 100644
index 0000000..b914e17
--- /dev/null
+++ b/src/layers.js
@@ -0,0 +1,3295 @@
+/***********************************************************************
+ * 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': {
+    popoverTitle: 'Bearbetningskoncession \u2013 beviljad',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Ägare',              'owners'],
+      ['Tillståndsid',       'licenceid', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Giltig från',        'validfrom'],
+      ['Giltig till',        'validto'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Beslutsdatum',       'dec_date'],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Bearbetningskoncession \u2013 ansökt',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Sökande',            'owners'],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Undersökningstillstånd, metaller och industrimineral \u2013 beviljad',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Ägare',              'owners'],
+      ['Tillståndsid',       'licenceid', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Giltig från',        'validfrom'],
+      ['Giltig till',        'validto'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Beslutsdatum',       'dec_date'],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Undersökningstillstånd, metaller och industrimineral \u2013 ansökt',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Sökande',            'owners'],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Undersökningstillstånd, olja, gas och diamant \u2013 beviljad',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Ägare',              'owners'],
+      ['Tillståndsid',       'licenceid', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Giltig från',        'validfrom'],
+      ['Giltig till',        'validto'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Beslutsdatum',       'dec_date'],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Undersökningstillstånd, olja, gas och diamant \u2013 ansökt',
+    popover: [
+      ['Namn',               'name'],
+      ['Koncessionsmineral', 'mineral'],
+      ['Sökande',            'owners'],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Markanvisning till koncession',
+    popover: [
+      ['Namn',               'name'],
+      ['Tillhörande bearbetnings\u00ADkoncession(er)', 'conc_name'],
+      ['Tillståndsid',       'licenceid', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Areal',              'geom_area', { fn: 'area' }],
+      ['Diarienummer',       'diarynr', { classes: ['feature-attr-dnr'] }],
+      ['Ansökningsdatum',    'appl_date'],
+      ['Beslutsdatum',       'dec_date'],
+      //['Kommun',             'Municipality'],
+      //['Län',                'County'],
+    ],
+    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': {
+    popoverTitle: 'Kraftledning (befintlig)',
+    popover: [
+      ['Förläggning', 'Placement'],
+      ['Spänning', 'Voltage', { unit: 'kV' }],
+      ['Ledlängd', 'geom_length', { fn: 'length' }],
+    ],
+    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': {
+    popoverTitle: 'Transmissionsnätsprojekt',
+    popover: [
+      ['Projektnamn', 'Name'],
+      ['Spänning', 'Voltage', { unit: 'kV' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad projekteringsområde för vindkraft',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Aktuella verk', 'AntalVerk'],
+      ['Antal ej koordinatsatta verk', 'AntalEjXY'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Ändringsansökan pågår', 'AndringsansokanPagar'],
+      ['Under byggnation', 'UnderByggnation'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad projekteringsområde för vindkraft \u2013 ej aktuell',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Aktuella verk', 'AntalVerk'],
+      ['Antal ej koordinatsatta verk', 'AntalEjXY'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Ändringsansökan pågår', 'AndringsansokanPagar'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 tillståndsansökan uppförd',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Tillståndsansökan beviljad', 'AnsokanBeviljad'],
+      ['Överklagad', 'AnsokanOverklagad'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Parken uppförd', 'Uppfort'],
+      ['Beviljat antal verk', 'BeviljatAntalVerk'],
+      ['Uppfört antal verk', 'UppfortAntalVerk'],
+      ['Beviljad maxhöjd', 'BeviljadMaxhojd', { unit: 'm' }],
+      ['Installerad effekt', 'InstalleradEffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 tillståndsansökan beviljad',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Ändringsansökan pågår', 'AndringsansokanPagar'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Tillståndsansökan återkallad', 'AnsokanAterkallad'],
+      ['Tillståndsansökan beviljad', 'AnsokanBeviljad'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Under byggnation', 'UnderByggnation'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Beviljat antal verk', 'BeviljatAntalVerk'],
+      ['Beviljad maxhöjd', 'BeviljadMaxhojd', { unit: 'm' }],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 ändringsansökan',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      //['Ändringsansökan pågår', 'AndringsansokanPagar'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      //['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      //['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 tillståndsansökan avslagen',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Tillståndsansökan avslagen', 'AnsokanAvslagen'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 överklagad',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Tillståndsansökan beviljad', 'AnsokanBeviljad'],
+      ['Överklagad', 'AnsokanOverklagad'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Beviljat antal verk', 'BeviljatAntalVerk'],
+      ['Beviljad maxhöjd', 'BeviljadMaxhojd', { unit: 'm' }],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 tillståndsansökan inlämnad',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 samråd inför tillståndsansökan',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: 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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 inledande undersökningar',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Havsbaserad vindkraft \u2013 inte aktuell eller återkallad',
+    popover: [
+      ['Projektnamn', 'Projektnamn'],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Verksamhetsutövare', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Projektstatus', 'Projektstatus'],
+      ['Diarienummer', 'Diarienummer'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Samrådsunderlag inlämnat', 'SamradsunderlagInlamnat'],
+      ['Tillståndsansökan inlämnad', 'AnsokanInlamnat'],
+      ['Tillståndsansökan återkallad', 'AnsokanAterkallad'],
+      ['Tillståndsansökan beviljad', 'AnsokanBeviljad'],
+      ['Överklagad', 'AnsokanOverklagad'],
+      ['Natura2000 ansökan', 'Natura2000_Ansokan'],
+      ['Natura2000 beslutsdatum', 'Natura2000_Beslutdatum'],
+      ['Planerat antal verk (min)', 'PlaneratAntalVerkMin'],
+      ['Planerat antal verk (max)', 'PlaneratAntalVerkMax'],
+      ['Panerad totalhöjd (min)', 'PlaneradHojdMin', { unit: 'm' }],
+      ['Panerad totalhöjd (max)', 'PlaneradHojdMax', { unit: 'm' }],
+      ['Planerad årsproduktion (min)', 'PlaneradProduktionMin', { unit: 'GWh' }],
+      ['Planerad årsproduktion (max)', 'PlaneradProduktionMax', { unit: 'GWh' }],
+      ['Planerad byggstart', 'PlaneradByggstart'],
+      ['Planerat drifttagande', 'PlaneratDrift'],
+      ['Beviljat antal verk', 'BeviljatAntalVerk'],
+      ['Beviljad maxhöjd', 'BeviljadMaxhojd', { unit: 'm' }],
+      ['Elområde', 'ElNamn'],
+      ['Senast uppdaterat', 'SenasteUppdaterat'],
+    ],
+    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: [105, 61, 154, .5],
+          }),
+          stroke: width === 0 ? undefined : new Stroke({
+            width: width,
+            color: [105, 62, 153, 1],
+          }),
+        });
+      }),
+  },
+  'vbk.station_completed': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 uppfört',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Uppförandedatum', 'Uppfort'],
+      ['Miljöbalken tillstånd tidsbegränsning', 'MB_Tillstand'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 handlagt',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 beviljat',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Miljöbalken tillstånd tidsbegränsning', 'MB_Tillstand'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 inte längre aktuell/återkallat',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Miljöbalken tillstånd tidsbegränsning', 'MB_Tillstand'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 avslagit/nekat',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Miljöbalken tillstånd tidsbegränsning', 'MB_Tillstand'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 nedmonterat',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Uppförandedatum', 'Uppfort'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Landbaserad vindkraftverk \u2013 överklagat',
+    popover: [
+      ['Verk-ID', 'VerkID', { classes: ['feature-objid'] }],
+      ['Områdes-ID', 'OmrID', { classes: ['feature-objid'] }],
+      ['Projektnamn', 'Projektnamn'],
+      ['Status', 'Status'],
+      ['Handlingstyp', 'Handlingstyp'],
+      ['Totalhöjd', 'Totalhojd', { unit: 'm' }],
+      ['Navhöjd', 'Navhojd', { unit: 'm' }],
+      ['Rotordiameter', 'Rotordiameter', { unit: 'm' }],
+      ['Maxeffekt', 'Maxeffekt', { unit: 'MW' }],
+      ['Beräknad årsproduktion', 'Calprod', { unit: 'GWh' }],
+      ['Fabrikat', 'Fabrikat'],
+      ['Modell', 'Modell'],
+      ['Organisationsnamn', 'Organisationsnamn'],
+      ['Organisationsnummer', 'Organisationsnummer', { classes: ['feature-orgnr'] }],
+      ['Placering', 'Placering'],
+      //['Kommun', 'KOMNAMN'],
+      //['Län', 'LANSNAMN'],
+      ['Elområde', 'ElNamn'],
+      ['Datum för senaste uppdatering av verk', 'SenasteUppdaterat'],
+    ],
+    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': {
+    popoverTitle: 'Utförd avverkning',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Registeringsår', 'ArendeAr'],
+      ['Skogstyp', 'Skogstyp'],
+      ['Areal anmält', 'AnmaldHa', { unit: 'ha' }],
+      ['Areal naturlig föryngring', 'NatforHa', { unit: 'ha', fn: (v) => v === 0 ? '' : v }],
+      //['Areal plantering', 'SkogsodlHa', { unit: 'ha', fn: (v) => v === 0 ? '' : v }],
+      ['Avverkningstyp', 'Avverktyp'],
+      ['Datum för avverkning', 'Avvdatum'],
+      ['Ursprung för datum för avverkning', 'KallaDatum'],
+      //['Ursprung för areal avverkning', 'KallaAreal'],
+      //['Kommun', 'Kommun'],
+      //['Län', 'Lan'],
+      ['Areal för ytan', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Avverkningsanmälansområde',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Inkom datum', 'Inkomdatum'],
+      ['Registeringsår', 'ArendeAr'],
+      //['Skogstyp', 'Skogstyp'],
+      ['Areal anmält', 'AnmaldHa', { unit: 'ha' }],
+      ['Areal naturlig föryngring', 'NatforHa', { unit: 'ha', fn: (v) => v === 0 ? '' : v }],
+      ['Areal plantering', 'SkogsodlHa', { unit: 'ha', fn: (v) => v === 0 ? '' : v }],
+      ['Avverkningssäsong', 'AvvSasong'],
+      //['Avverkningstyp', 'Avverktyp'],
+      //['Ändamål', 'Andamal'],
+      //['Kommun', 'Kommun'],
+      //['Län', 'Lan'],
+      ['Ärendestatus', 'ArendeStatus'],
+      ['Avverkad areal', 'AvvHa', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Tillträdesförbud',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Föreskriftsområde', 'FORSKRNAMN'],
+      ['Namn', 'OBJEKTNAMN'],
+      ['Beslutsstatus', 'BESLSTAT'],
+      ['Föreskriftstyp', 'FORESKRTYP'],
+      ['Föreskriftssubtyp', 'FORESKRIFT'],
+      ['Från datum', 'FRANDATUM'],
+      ['Till datum', 'TILLDATUM'],
+      ['Beskrivning', 'BESKRIVN'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    legend: { zoomLevel: 2 },
+    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width, z) {
+        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': {
+    popoverTitle: 'Nationalpark',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Naturreservat',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Kommunalt naturreservat',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Naturvårdsområde',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Djur- och växtskyddsområde',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Kulturreservat',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Vattenskyddsområden',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ikraftträdandedatum föreskrifter', 'IKRAFTDATF'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Tillsynsmyndighet', 'TILLSYNSMH'],
+      ['Prövningsmyndighet tillstånd', 'PROVNMHTIL'],
+      ['Prövningsmyndighet dispens', 'PROVNMHDIS'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Landskapsbildsskyddsområde',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Biotopskydd i skogsmark',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Biotopkategori', 'Biotyp'],
+      ['Skogstyp', 'Naturtyp'],
+      ['Registeringsår', 'ArendeAr'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Skogsmarksareal', 'AreaProd', { unit: 'ha' }],
+      ['Beslutsdatum', 'Datbeslut'],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Biotopskydd utanför skogsmark',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Naturminne (yta)',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Naturminne (punkt)',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    legend: { zoomLevel: 6, type: 'point' },
+    style: [undefined, undefined, undefined, undefined].concat([3, 4, 6, 8, 12, 16, 20, 24].map(function(width, z) {
+        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': {
+    popoverTitle: 'Interimistiskt förbud',
+    popover: [
+      ['NVR-ID', 'NVRID', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Beslutsstatus', 'BESLSTATUS'],
+      ['Beslutsdatum (bildande)', 'URSBESLDAT'],
+      ['Ursprungligt gällandedatum', 'URSGALLDAT'],
+      ['Senaste gällandedatum', 'SENGALLDAT'],
+      ['Förvaltare', 'FORVALTARE'],
+      ['IUCN-kategori', 'IUCNKAT'],
+      ['Diarienummer', 'DIARIENR', { classes: ['feature-attr-dnr'] }],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsmyndighet', 'BESLMYND'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Fågeldirektivet (SPA)',
+    popover: [
+      ['Områdeskod', 'SITE_CODE', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Områdestyp', 'OMRADESTYP'],
+      ['Uppgiftslämnare', 'UPPLAMNARE'],
+      ['SPA-datum', 'SPA_DATUM'],
+      ['SCI-förslagsdatum', 'SCI_FORSL'],
+      ['SCI-datum', 'SCI_DATUM'],
+      ['SAC-datum', 'SAC_DATUM'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Kvalitet', 'KVALITET'],
+      ['Kännetecken för området', 'KARAKTAR'],
+      ['Arter', 'ARTER'],
+      ['Naturtyper', 'NATURTYPER'],
+      ['Bevarandeplan', 'BEVPLAN', { fn: function(v) {
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Art- och habitatdirektivet (SCI)',
+    popover: [
+      ['Områdeskod', 'SITE_CODE', { classes: ['feature-objid'] }],
+      ['Namn', 'NAMN'],
+      ['Områdestyp', 'OMRADESTYP'],
+      ['Uppgiftslämnare', 'UPPLAMNARE'],
+      ['SPA-datum', 'SPA_DATUM'],
+      ['SCI-förslagsdatum', 'SCI_FORSL'],
+      ['SCI-datum', 'SCI_DATUM'],
+      ['SAC-datum', 'SAC_DATUM'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Kvalitet', 'KVALITET'],
+      ['Kännetecken för området', 'KARAKTAR'],
+      ['Arter', 'ARTER'],
+      ['Naturtyper', 'NATURTYPER'],
+      ['Bevarandeplan', 'BEVPLAN', { fn: function(v) {
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Marina skyddade områden (Helcom MPA)',
+    popover: [
+      ['Namn', 'NAME'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Ramsar-områden (Våtmarkskonventionen)',
+    popover: [
+      ['Ramsar-ID', 'RAMSAR_ID', { classes: ['feature-objid'] }],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Namn', 'NAMN'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+      ['Ursprungligt beslutsdatum', 'URSPR_BESL'],
+      ['Senaste beslutsdatum', 'SEN_BESLUT'],
+      ['Rättsakt', 'LEGAL_ACT'],
+      ['Länk', 'LINK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Marina skyddade områden (Ospar MPA)',
+    popover: [
+      ['Ursprung', 'ORIGIN'],
+      ['N2000-namn', 'NAMN_N2000'],
+      ['MPA-ID', 'MPA_ID', { classes: ['feature-objid'] }],
+      ['MPA-namn', 'MPA_NAMN'],
+      ['N2000-ID', 'N2000_SITE', { classes: ['feature-objid'] }],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Världsarv med mycket höga naturvärden (Unesco)',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Biosfärsområde (Unesco)',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Länk', 'LINK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Naturvårdsavtal (Naturvårdsverket, Länsstyrelsen)',
+    popover: [
+      ['ID', 'ID', { classes: ['feature-objid'] }],
+      ['Namn', 'OBJNAMN'],
+      ['Fastighet', 'FASTBET', { classes: ['feature-objid'] }],
+      ['Giltig från', 'DATSTART'],
+      ['Giltig till', 'DATSLUT'],
+      ['Diarienummer', 'DIARIENRNV', { classes: ['feature-attr-dnr'] }],
+      ['Satus', 'STATUS'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Naturvårdsavtal (Skogsstyrelsen)',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Registeringsår', 'ArendeAr'],
+      ['Biotopkategori', 'NvaTyp'],
+      ['Skogstyp', 'Naturtyp'],
+      ['Avtalsdatum', 'DatAvtal'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Skogsmarksareal', 'AreaProd', { unit: 'ha' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Undertyp', 'Undertyp'],
+    ],
+    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': {
+    popoverTitle: 'Återvätningsavtal',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Ärendeår', 'ArendeAr'],
+      ['Avtalat datum', 'AvtalatDatum'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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(width) {
+        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': {
+    popoverTitle: 'Objekt med naturvärden (Skogsstyrelsen)',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Namn', 'Objnamn'],
+      ['Datum för fältinventering', 'Datinv'],
+      ['Biotoptyp #1', 'Biotop1'],
+      ['Biotoptyp #2', 'Biotop2'],
+      ['Biotoptyp #3', 'Biotop3'],
+      ['Nyckelord #1 som beskriver objektet', 'Beskrivn1'],
+      ['Nyckelord #2 som beskriver objektet', 'Beskrivn2'],
+      ['Nyckelord #3 som beskriver objektet', 'Beskrivn3'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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(width) {
+        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': {
+    popoverTitle: 'Nyckelbiotop (Skogsstyrelsen)',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Namn', 'Objnamn'],
+      ['Datum för fältinventering', 'Datinv'],
+      ['Biotoptyp #1', 'Biotop1'],
+      ['Biotoptyp #2', 'Biotop2'],
+      ['Biotoptyp #3', 'Biotop3'],
+      ['Nyckelord #1 som beskriver objektet', 'Beskrivn1'],
+      ['Nyckelord #2 som beskriver objektet', 'Beskrivn2'],
+      ['Nyckelord #3 som beskriver objektet', 'Beskrivn3'],
+      ['Nyckelord #4 som beskriver objektet', 'Beskrivn4'],
+      ['Nyckelord #5 som beskriver objektet', 'Beskrivn5'],
+      ['Nyckelord #6 som beskriver objektet', 'Beskrivn6'],
+      ['Nyckelord #7 som beskriver objektet', 'Beskrivn7'],
+      ['Nyckelord #8 som beskriver objektet', 'Beskrivn8'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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(width) {
+        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': {
+    popoverTitle: 'Nyckelbiotop (storskogsbruket)',
+    popover: [
+      ['Uppgifter lämnade av', 'Org'],
+      ['Inkom datum', 'InkomDatum'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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(width) {
+        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': {
+    popoverTitle: 'Sumpskog',
+    popover: [
+      ['Objektnamn', 'Namn'],
+      ['Skogstyp', 'Tradtext'],
+      ['Hydrologisk typ', 'Hydrtext'],
+      ['Klass på delobjektet', 'Delklass'],
+      ['Klass på objektet', 'Klassu'],
+      ['Andel löv', 'Lovandel'],
+      ['Andel öppet vatten', 'Andelva'],
+      ['Krontäckning', 'Krontakn'],
+      ['Huggningsklass', 'Huggklas'],
+      ['Ingrepp på delobjekt (max 4)', 'Ingrepp'],
+      ['Grad av påverkan på delobjekt (max 4)', 'Ingrpavv'],
+      ['Nyckelord på objektnivå', 'Objnyck'],
+      ['Nyckelord på delobjektsnivå', 'Delnyck'],
+      ['Flygbildsår', 'Flygar'],
+      ['Datum för fältbesök', 'Faltdat'],
+      ['Inventeringsteknik', 'Invtekn'],
+      ['Inventeringdatum', 'Invdat'],
+      ['Ansvarig myndighet', 'Ansvmynd'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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': {
+    popoverTitle: 'Pågående naturreservatsbildning',
+    popover: [
+      ['Objektnamn', 'NAMN'],
+      ['Senast justerat', 'GRANSJUST'], /* XXX unclear what "GRANSJUST" means, just a guess */
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Skyddsvärd statlig skog',
+    popover: [
+      ['Objektnamn', 'NAMN'],
+      ['År', 'AR'],
+      ['Naturgeografisk region', 'NATURGEOGR', { classes: ['feature-objid'] }],
+      ['Objektskategori', 'OBJEKTKATE', { classes: ['feature-objid'] }],
+      ['Markägare', 'MARKAGARE'],
+      ['Areal värdekärna', 'VARDEKARNA', { unit: 'ha' }],
+      ['Areal utvecklingsmark', 'UTV_MARK', { unit: 'ha' }],
+      ['Totalareal', 'TOTAL_AREA', { unit: 'ha' }],
+      ['Areal land', 'LAND', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN', { unit: 'ha' }],
+      ['Areal produktiv skogsmark', 'PROD_SKOG', { unit: 'ha' }],
+      ['Areal produktiv skogsmark ovanför fjällnära gräns', 'SKOG_O_FJG', { unit: 'ha' }],
+      ['Areal produktiv skogsmark nedanför fjällnära gräns', 'SKOG_N_FJG', { unit: 'ha' }],
+      ['Areal skyddszon', 'SKYDDSZON', { unit: 'ha' }],
+      ['Areal arronderingsmark', 'ARRO_MARK', { unit: 'ha' }],
+      ['Kriterier för urval', 'KRITERIER'],
+      ['Beskrivning av området', 'BESKRIVN'],
+      ['Länsstyrelsens bedömning', 'LST_BEDOMN'],
+      ['Källor', 'KALLOR'],
+    ],
+    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: 4,
+          fill: new Fill({
+            color: [168,168,0,.2],
+          }),
+          stroke: width === 0 ? undefined : new Stroke({
+            width: width,
+            color: [168,77,0,.75],
+          }),
+        });
+      }),
+  },
+
+  'ri.naturvard': {
+    popoverTitle: 'Riksintresse naturvård',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Skydd', 'SKYDD'],
+      ['Ämnesområde', 'AMNESOMRAD'],
+      ['Beskrivning', 'BESKRIVNIN', { fn: function(v) {
+        if (v == null || !(v.startsWith('http://') || v.startsWith('https://'))) {
+          return v;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsdatum', 'BESLUTSDAT'],
+      ['Original-ID', 'ORGINALID', { classes: ['feature-objid'] }],
+      ['Riks-ID', 'RIKSID', { classes: ['feature-objid'] }],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Riksintresse friluftsliv',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Skydd', 'SKYDD'],
+      ['Ämnesområde', 'AMNESOMR'],
+      ['Områdesnummer', 'OMRADESNR', { classes: ['feature-objid'] }],
+      ['Länk värdebeskrivning', 'LANK_VARDE', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Lagrum', 'LAGRUM'],
+      ['Beslutsdatum', 'BESLDATUM'],
+      ['Ärendenummer', 'ARENDENR', { classes: ['feature-attr-dnr'] }],
+      ['Länk, beslut', 'LANK_BESLU', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Aktivitet', 'AKTIVITET'],
+      ['Naturtyp', 'NATURTYP'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Areal land', 'AREA_LAND_', { unit: 'ha' }],
+      ['Areal vatten', 'AREA_VATTE', { unit: 'ha' }],
+    ],
+    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': {
+    popoverTitle: 'Riksintresse rörligt friluftsliv (MB 4 kap 1§ och 2§)',
+    popover: [
+      ['Namn', 'NAMN'],
+      //['Original-ID', 'ORIGINALID', { classes: ['feature-objid'] }],
+      ['Beskrivning', 'BESKRIVNIN'],
+      //['Metodbeskrivning', 'METODBESKR'],
+      //['Tillk. datum', 'TILLKDATUM'],
+      //['Rev. datum', 'REVDATUM'],
+      ['Anmärkning', 'ANM'],
+      ['Länk', 'OBJEKTLANK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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': {
+    popoverTitle: 'Riksintresse obruten kust (MB 4 kap 3§)',
+    popover: [
+      ['Namn', 'NAMN'],
+      //['Original-ID', 'ORIGINALID', { classes: ['feature-objid'] }],
+      ['Beskrivning', 'BESKRIVNIN'],
+      //['Metodbeskrivning', 'METODBESKR'],
+      //['Tillk. datum', 'TILLKDATUM'],
+      //['Rev. datum', 'REVDATUM'],
+      ['Anmärkning', 'ANM'],
+      ['Objekttyp', 'OBJTYP'],
+      ['Länk', 'OBJEKTLANK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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': {
+    popoverTitle: 'Riksintresse obrutet fjäll (MB 4 kap 5§)',
+    popover: [
+      ['Namn', 'NAMN'],
+      //['Original-ID', 'ORIGINALID', { classes: ['feature-objid'] }],
+      ['Beskrivning', 'BESKRIVNIN'],
+      ['Metodbeskrivning', 'METODBESKR'],
+      ['Tillk. datum', 'TILLKDATUM'],
+      //['Rev. datum', 'REVDATUM'],
+      ['Länk', 'OBJEKTLANK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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': {
+    popoverTitle: 'Riksintresse skyddade vattendrag (MB 4 kap 6§)',
+    popover: [
+      ['Namn', 'NAMN'],
+      //['Original-ID', 'ORIGINALID', { classes: ['feature-objid'] }],
+      ['Beskrivning', 'BESKRIVNIN'],
+      ['Metodbeskrivning', 'METODBESKR'],
+      ['Tillk. datum', 'TILLKDATUM'],
+      ['Rev. datum', 'REVDATUM'],
+      ['Anmärkning', 'ANM'],
+      ['Digitaliseringsskala', 'DIG_SKALA'],
+      ['Länk', 'OBJEKTLANK', { fn: function(v) {
+        if (v == null || v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+      ['Areal', 'geom_area', { fn: 'area' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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': {
+    popoverTitle: 'Samebyarnas betesområde',
+    popover: [
+      ['Sameby', 'NAMN'],
+      ['Samebys typ', 'SAMEBY_TYP'],
+      ['Signatur', 'SIGNATUR'],
+      ['Aktualitet', 'AKTUALITET'],
+    ],
+    legend: { zoomLevel: 0 },
+    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width, z) {
+        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': {
+    popoverTitle: 'Samebyarnas markanvändningsredovisning \u2013 flyttled',
+    popover: [
+      ['Led-ID', 'LED_ID', { classes: ['feature-objid'], fn: (v) => v === 0 ? '' : v }],
+      ['Sameby #1', 'SAMEBY1'],
+      ['Sameby #2', 'SAMEBY2'],
+      ['Sameby #3', 'SAMEBY3'],
+      ['Beskrivning', 'BESKRIVNIN'],
+      ['Årstid', 'ARSTID'],
+      ['Riksintresse', 'RIKSINTR'],
+      ['Fast led', 'FAST_LED'],
+      ['Aktualitet', 'AKTUALITET'],
+      ['Signatur', 'SIGNATUR'],
+      ['Ledlängd', 'geom_length', { fn: 'length' }],
+    ],
+    legend: { zoomLevel: 2, type: 'linestring' },
+    style: [.75, 1, 1.5, 2, 3, 4, 5, 5, 6, 7, 8, 10].map(function(width, z) {
+        return new Style({
+          zIndex: 7,
+          stroke: new Stroke({
+            width: 2*width,
+            color: [119, 99, 59, 1],
+            lineDash: [4 * width],
+          }),
+        });
+      }),
+  },
+  'ren.riks_ren': {
+    popoverTitle: 'Riksintresse rennäring',
+    popover: [
+      ['Lagrum', 'LAGRUM'],
+      ['Aktualitet', 'AKTUALITET'],
+      ['Signatur', 'SIGNATUR'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: '(Kärn)områden av riksintresse rennäring',
+    popover: [
+      ['Områdes-ID', 'OMR_NR', { classes: ['feature-objid'] }],
+      ['Länk', 'LANK'],
+      ['Årets runt', 'ARET_RUNT'],
+      ['Sameby', 'SAMEBY'],
+      ['Ansvarig', 'ANSVARIG'],
+      ['Aktualitet', 'AKTUALITET'],
+      ['Signatur', 'SIGNATUR'],
+      ['Areal', 'geom_area', { fn: 'area' }],
+    ],
+    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': {
+    popoverTitle: 'Damm',
+    popover: [
+      ['Dammenhetens namn', 'DNamn'],
+      ['Dammanläggningens namn', 'Namn'],
+      ['Länsnr', 'LST_OBJID', { classes: ['feature-objid'] }],
+      ['Status', 'Status', { fn: (v) => v === 1 ? 'Befintlig damm' : v === 2 ? 'Fd. damm' : '' }],
+      //['Regleringstyp', 'Regleringstyp'],
+      ['Byggår', 'ByggAr'],
+      ['Dammhöjd', 'DammHojd', { unit: 'm' }],
+      ['Krönlängd', 'KronLangd', { unit: 'm' }],
+      ['Fiskväg', 'Fiskvag', { fn: (v) =>
+        v === 1 ? 'Bassängtrappa' :
+        v === 2 ? 'Denilränna' :
+        v === 3 ? 'Slitsränna' :
+        v === 4 ? 'Omlöp' :
+        v === 5 ? 'Inlöp' :
+        v === 6 ? 'Ålledare' :
+        v === 7 ? 'Smoltränna' :
+        v === 8 ? 'Okänd typ' :
+        v === 9 ? 'Ingen' :
+        v === 10 ? 'Annan' :
+        '' }],
+      ['Huvudavrinningsområdesnummer', 'HARO', { classes: ['feature-objid'] } ],
+      ['Vattendistrikt', 'Vattendistrikt', { classes: ['feature-objid'] } ],
+      ['Verksamhet', 'Verksamhet', { fn: (v) =>
+        v === 1 ? 'Kraftproduktion' :
+        v === 2 ? 'Industri' :
+        v === 3 ? 'Sjöfart' :
+        v === 4 ? 'Invallning' :
+        v === 5 ? 'Vattenförsörjning' :
+        v === 6 ? 'Spegeldamm' :
+        v === 7 ? 'Historisk' :
+        v === 8 ? 'Övrigt' :
+        '' }],
+      ['Högsta dämningsgräns', 'DG', { unit: 'm' }],
+      ['Lägsta sänkningsgräns', 'SG', { unit: 'm' }],
+      ['Magasinsyta', 'MY', { unit: 'km²' }],
+      ['Reglerbar volym', 'RV', { unit: 'Mm³' }],
+      ['Kommentar', 'Kommentar'],
+    ],
+    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': {
+    popoverTitle: 'Stor industrisatsning',
+    popover: [
+      ['Namn', 'Name'],
+      ['Länk', 'Url', { fn: function(v) {
+        if (v == null | v === '') {
+          return;
+        }
+        const a = document.createElement('a');
+        a.href = v;
+        a.target = '_blank';
+        const i = document.createElement('i');
+        i.classList.add('bi', 'bi-box-arrow-up-right');
+        a.appendChild(i);
+        return a;
+      }}],
+    ],
+    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) */
+};