Add some nature value layers.

1 files changed, 365 insertions, 1 deletions

diff --git a/main.js b/main.js
index 4b1051d..fe2a2c0 100644
--- a/main.js
+++ b/main.js
@@ -2908,6 +2908,345 @@ const layers = {
         });
       }),
   },
+  'nvr.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 === 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: [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 === 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: [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 === 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: [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 === 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: [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 === 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: [.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 = 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],
+          }),
+        });
+      }),
+  },
 
   'ri.naturvard': {
     popoverTitle: 'Riksintresse naturvård',
@@ -3759,6 +4098,31 @@ const layerHierarchy = [
           }
         ]
       },
+      {
+        text: 'Återvätningsavtal',
+        layer: 'nvr.atervatningsavtal',
+      }
+    ]
+  },
+  {
+    text: 'Skogliga värden',
+    children: [
+      {
+        text: 'Objekt med naturvärden (Skogsstyrelsen)',
+        layer: 'nv.naturvarde_sks',
+      },
+      {
+        text: 'Nyckelbiotoper',
+        layer: 'nv.nyckelbiotop',
+      },
+      {
+        text: 'Nyckelbiotoper storskogsbruket',
+        layer: 'nv.nyckelbiotop_storskogsbruk',
+      },
+      {
+        text: 'Sumpskogar',
+        layer: 'nv.sumpskog',
+      },
     ]
   },
   {
@@ -3839,7 +4203,7 @@ const [vectorLayers, featureOverlayLayer] = (function() {
     Object.fromEntries(
       /* Note: layers are added in the order below, so leave SvK and
        * misc at the end so they show up on top of suface features */
-      ['mrr', 'nvr', 'ren', 'ri', 'sks', 'vbk', 'svk', 'misc']
+      ['nv', 'mrr', 'nvr', 'ren', 'ri', 'sks', 'vbk', 'svk', 'misc']
         .map(function(k) {
           let visible = false;
           Object.keys(layers).forEach(function(lyr) {