Add layers for Riksintressen, naturvård och friluftsliv.HEADmaster

2 files changed, 381 insertions, 1 deletions

diff --git a/index.html b/index.html
index 5f168a2..165f47a 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
                 <a href="https://www.energimyndigheten.se/energisystem-och-analys/elproduktion/vindkraft/vindbrukskollen/" target="_blank">Länsstyrelserna och Energimyndigheten</a>,
                 CC0 (<a href="https://ext-geodatakatalog-forv.lansstyrelsen.se/GeodataKatalogen/codelist/metadata/anvandningsrestriktioner.xml#CC01.0" target="_blank">öppna data</a>).
               </li>
-              <li><i>Skogsbruk</i>, <i>Skogligt biotopskyddsområden</i> och <i>Naturvårdsavtal</i> från
+              <li><i>Skogsbruk</i>, <i>Skogliga biotopskyddsområden</i> och <i>Naturvårdsavtal</i> från
                 <a href="https://skogsstyrelsen.se" target="_blank">Skogsstyrelsen</a>,
                 CC0 (<a href="https://www.skogsstyrelsen.se/sjalvservice/karttjanster/geodatatjanster/villkor-for-nyttjande-av-skogsstyrelsens-kartdatabaser/" target="_blank">öppna data</a>).
               </li>
@@ -45,6 +45,12 @@
                 <a href="https://www.naturvardsverket.se/" target="_blank">Naturvårdsverket</a>,
                 CC0 (<a href="https://geodata.naturvardsverket.se/nedladdning/naturvardsregistret/Naturvardsregistret_beskrivning_av_oppna_data.pdf" target="_blank">öppna data</a>).
               </li>
+              <li><i>Riksintresse naturvård</i> och <i>frilufsliv</i> från
+                <a href="https://www.naturvardsverket.se/" target="_blank">Naturvårdsverket</a>
+                och
+                <a href="https://www.lansstyrelsen.se/" target="_blank">Länsstyrelsen</a>,
+                CC-BY-4.0 (<a href="https://ext-geodatakatalog-forv.lansstyrelsen.se/GeodataKatalogen/codelist/metadata/anvandningsrestriktioner.xml#CCby4.0" target="_blank">öppna data</a>).
+              </li>
               <li><i>Riksintresse Rennäringen</i> skikt från
                 <a href="https://sametinget.se" target="_blank">Sametinget</a>,
                 CC-BY-4.0 (<a href="https://ext-geodatakatalog-forv.lansstyrelsen.se/GeodataKatalogen/codelist/metadata/anvandningsrestriktioner.xml#CCby4.0" target="_blank">öppna data</a>).
diff --git a/main.js b/main.js
index fc92195..4917e79 100644
--- a/main.js
+++ b/main.js
@@ -2335,6 +2335,351 @@ const layers = {
       }),
   },
 
+  ri_naturvard: {
+    popoverTitle: 'Riksintresse naturvård',
+    popover: [
+      ['Namn', 'NAMN'],
+      ['Skydd', 'SKYDD'],
+      ['Ämnesområde', 'AMNESOMRAD'],
+      ['Beskrivning', 'BESKRIVNIN', { fn: function(v) {
+        if (v === undefined || 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', '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(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) {
+        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) {
+        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', 'GeomArea', { fn: 'area' }],
+      ['Areal land', 'AREA_LAND_', { unit: 'ha' }],
+      ['Areal vatten', 'AREA_VATTE', { 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, 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) {
+          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' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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) {
+          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' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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) {
+          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' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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) {
+          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' }],
+      ['Referens', 'REFERENS'],
+    ],
+    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_betesomraden: {
     popoverTitle: 'Samebyarnas betesområde',
     popover: [
@@ -2806,6 +3151,35 @@ const layerHierarchy = [
     ]
   },
   {
+    text: 'Riksintressen, naturvård och friluftsliv',
+    children: [
+      {
+        text: 'Naturvård',
+        layer: 'ri_naturvard',
+      },
+      {
+        text: 'Friluftsliv',
+        layer: 'ri_friluftsliv',
+      },
+      {
+        text: 'Rörligt friluftsliv',
+        layer: 'ri_rorligt_friluftsliv',
+      },
+      {
+        text: 'Obruten kust',
+        layer: 'ri_obruten_kust',
+      },
+      {
+        text: 'Obrutet fjäll',
+        layer: 'ri_obrutet_fjall',
+      },
+      {
+        text: 'Skyddade vattendrag',
+        layer: 'ri_skyddade_vattendrag',
+      },
+    ]
+  },
+  {
     /* Definitions at
      * https://ext-dokument.lansstyrelsen.se/Gemensamt/Geodata/Datadistribution/Information,%20Skiktf%C3%B6rteckning%20och%20f%C3%B6rklaringar.pdf */
     text: 'Rennäringen',