Add layers for Naturvårdsregistret and Naturvårdsavtal.

1 files changed, 1237 insertions, 0 deletions

diff --git a/main.js b/main.js
index 0cf51c9..fc92195 100644
--- a/main.js
+++ b/main.js
@@ -1211,6 +1211,1130 @@ const layers = {
       }),
   },
 
+  nvr_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', 'GeomArea', { fn: 'area' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_skogligt_biotopskyddsomrade: {
+    popoverTitle: 'Biotopskydd i skogsmark',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Biotopkategori', 'Biotyp'],
+      ['Skogstyp', 'Naturtyp'],
+      ['Registeringsår', 'ArendeAr'],
+      ['Areal', 'GeomArea', { fn: 'area' }],
+      ['Skogsmarksareal', 'AreaProd', { unit: 'ha' }],
+      ['Beslutsdatum', 'Datbeslut'],
+      ['Länk', 'Url', { 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;
+      }}],
+    ],
+    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 < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
+            color: [134, 90, 71, 1],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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 < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
+            color: [255, 95, 0, 1],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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' }],
+    ],
+    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)',
+            }),
+          }),
+        });
+      }))
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'LAND_HA', { unit: 'ha' }],
+      ['Areal vatten', 'VATTEN_HA', { unit: 'ha' }],
+      ['Skogsmarksareal', 'SKOG_HA', { unit: 'ha' }],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { 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;
+      }}],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { 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;
+      }}],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  nvr_helcom: {
+    popoverTitle: 'Marina skyddade områden (Helcom MPA)',
+    popover: [
+      ['Namn', 'NAME'],
+      ['Areal', 'GeomArea', { fn: 'area' }],
+    ],
+    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)';
+        let 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],
+          }),
+        });
+      }),
+  },
+  nvr_ramsar: {
+    popoverTitle: 'Ramsar-områden (Våtmarkskonventionen)',
+    popover: [
+      ['Ramsar-ID', 'RAMSAR_ID', { classes: ['feature-objid'] }],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Namn', 'NAMN'],
+      ['Areal', 'GeomArea', { 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 === undefined || 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;
+      }}],
+    ],
+    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)';
+        let 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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+    ],
+    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)';
+        let 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],
+          }),
+        });
+      }),
+  },
+  nvr_varldsarv: {
+    popoverTitle: 'Världsarv med mycket höga naturvärden (Unesco)',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Areal', 'GeomArea', { fn: 'area' }],
+    ],
+    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)';
+        let 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],
+          }),
+        });
+      }),
+  },
+  nvr_biosfarsomraden: {
+    popoverTitle: 'Biosfärsområde (Unesco)',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Skyddstyp', 'SKYDDSTYP'],
+      ['Länk', 'LINK', { fn: function(v) {
+        if (v === undefined || 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', 'GeomArea', { fn: 'area' }],
+    ],
+    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)';
+        let 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],
+          }),
+        });
+      }),
+  },
+  nvr_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', 'GeomArea', { fn: 'area' }],
+    ],
+    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 < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
+            color: [255, 0, 197, 1],
+          }),
+        });
+      }),
+  },
+  nvr_naturvardsavtal_skogsstyrelsen: {
+    popoverTitle: 'Naturvårdsavtal (Skogsstyrelsen)',
+    popover: [
+      ['Ärendebeteckning', 'Beteckn', { classes: ['feature-objid'] }],
+      ['Registeringsår', 'ArendeAr'],
+      ['Biotopkategori', 'NvaTyp'],
+      ['Skogstyp', 'Naturtyp'],
+      ['Avtalsdatum', 'DatAvtal'],
+      ['Areal', 'GeomArea', { fn: 'area' }],
+      ['Skogsmarksareal', 'AreaProd', { unit: 'ha' }],
+      ['Länk', 'Url', { 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;
+      }}],
+      ['Undertyp', 'Undertyp'],
+    ],
+    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 < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
+            color: [255, 0, 197, 1],
+          }),
+        });
+      }),
+  },
+
   ren_betesomraden: {
     popoverTitle: 'Samebyarnas betesområde',
     popover: [
@@ -1569,6 +2693,119 @@ const layerHierarchy = [
     ]
   },
   {
+    text: 'Skyddad natur',
+    children: [
+      {
+        text: 'Nationella skyddsformer',
+        children: [
+          {
+            text: 'Tillträdesförbud',
+            layer: 'nvr_tilltradesforbud',
+          },
+          {
+            text: 'Nationalpark',
+            layer: 'nvr_nationalpark',
+          },
+          {
+            text: 'Naturreservat',
+            layer: 'nvr_naturreservat',
+          },
+          {
+            text: 'Kommunala naturreservat',
+            layer: 'nvr_naturreservat_kommunalt',
+          },
+          {
+            text: 'Naturvårdsområden',
+            layer: 'nvr_naturvardsomrade',
+          },
+          {
+            text: 'Djur- och växtskyddsområden',
+            layer: 'nvr_djur_och_vaxtskyddsomrade',
+          },
+          {
+            text: 'Kulturreservat',
+            layer: 'nvr_kulturreservat',
+          },
+          {
+            text: 'Vattenskyddsområden',
+            layer: 'nvr_vattenskyddsomrade',
+          },
+          {
+            text: 'Landskapsbildsskyddsområden',
+            layer: 'nvr_landskapsbildsskyddsomrade',
+          },
+          {
+            text: 'Skogliga biotopskyddsområden',
+            layer: 'nvr_skogligt_biotopskyddsomrade',
+          },
+          {
+            text: 'Övriga biotopskyddsområden',
+            layer: 'nvr_ovrigt_biotopskyddsomrade',
+          },
+          {
+            text: 'Naturminne',
+            layer: [ 'nvr_naturminne_yta', 'nvr_naturminne_punkt' ],
+          },
+          {
+            text: 'Interimistiskt förbud',
+            layer: 'nvr_interimistiskt_forbud',
+          },
+        ],
+      },
+      {
+        text: 'Natura 2000-områden',
+        children: [
+          {
+            text: 'Fågeldirektivet (SPA)',
+            layer: 'nvr_fageldirektivet',
+          },
+          {
+            text: 'Art- och habitatdirektivet (SCI)',
+            layer: 'nvr_habitatdirektivet',
+          },
+        ],
+      },
+      {
+        text: 'Områden med internationell status',
+        children: [
+          {
+            text: 'Marina skyddade områden (Helcom MPA)',
+            layer: 'nvr_helcom',
+          },
+          {
+            text: 'Ramsar-områden (Våtmarkskonventionen)',
+            layer: 'nvr_ramsar',
+          },
+          {
+            text: 'Marina skyddade områden (Ospar MPA)',
+            layer: 'nvr_ospar',
+          },
+          {
+            text: 'Världsarv med mycket höga naturvärden (UNESCO)',
+            layer: 'nvr_varldsarv',
+          },
+          {
+            text: 'Biosfärsområden (UNESCO)',
+            layer: 'nvr_biosfarsomraden',
+          },
+        ],
+      },
+    ]
+  },
+  {
+    text: 'Naturvårdsavtal',
+    children: [
+      {
+        text: 'Naturvårdsverket, Länsstyrelserna',
+        layer: 'nvr_naturvardsavtal',
+      },
+      {
+        text: 'Skogsstyrelsen',
+        layer: 'nvr_naturvardsavtal_skogsstyrelsen',
+      }
+    ]
+  },
+  {
     /* Definitions at
      * https://ext-dokument.lansstyrelsen.se/Gemensamt/Geodata/Datadistribution/Information,%20Skiktf%C3%B6rteckning%20och%20f%C3%B6rklaringar.pdf */
     text: 'Rennäringen',