Add “mineral rights” layers (from SGU).

3 files changed, 283 insertions, 7 deletions

diff --git a/index.html b/index.html
index be14152..934ee70 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,9 @@
               <li><i>Transmissionsnät för el</i> från
                 <a href="https://svk.se" target="_blank">Svenska Kraftnät (SvK)</a>.
               </li>
+              <li><i>Mineralrättigheter</i> från
+                <a href="https://sgu.se" target="_blank">Sveriges geologiska undersökning (SGU)</a>.
+              </li>
               <li>Bakgrund kartor från
                 &copy; <a href="https://lantmateriet.se" target="_blank">Lantmäteriet</a>, CC0
                 (<a href="https://www.lantmateriet.se/sv/geodata/vara-produkter/oppna-data/#anchor-1" target="_blank">öppna data</a>).
diff --git a/main.js b/main.js
index 8006742..41a34ce 100644
--- a/main.js
+++ b/main.js
@@ -502,6 +502,221 @@ view.on('change', function(event) {
 
 
 const layers = {
+  mrr_appr_ec: {
+    popoverTitle: 'Bearbetningskoncession \u2013 beviljad',
+    popover: [
+      ['Namn',               'Name'],
+      ['Koncessionsmineral', 'Mineral'],
+      ['Ägare',              'Owner'],
+      ['Area',               'Area'],
+      ['Giltig från',        'Valid from'],
+      ['Giltig till',        'Valid to'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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',            'Applicant'],
+      ['Area',               'Area'],
+      ['Ansökningsdatum',    'Application date'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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',              'Owner'],
+      ['Licence id',         'Licence id', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Area',               'Area'],
+      ['Giltig från',        'Valid from'],
+      ['Giltig till',        'Valid to'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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',            'Applicant'],
+      ['Area',               'Area'],
+      ['Ansökningsdatum',    'Application date'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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',              'Owner'],
+      ['Licence id',         'Licence id', { classes: ['feature-attr-mrr-license-id'] }],
+      ['Area',               'Area'],
+      ['Giltig från',        'Valid from'],
+      ['Giltig till',        'Valid to'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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',            'Applicant'],
+      ['Area',               'Area'],
+      ['Ansökningsdatum',    'Application date'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    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'],
+      ['Area',              'Area'],
+      ['Beslutsdatum',      'Decision date'],
+      ['Diary nr',          'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',            'Municipality'],
+      ['Län',               'County'],
+      ['Senast uppdaterad', 'Last updated'],
+    ],
+    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],
+          }),
+        });
+      }),
+  },
+  mrr_appr_pc: {
+    popoverTitle: 'Gällande torvkoncession',
+    popover: [
+      ['Namn',               'Name'],
+      ['Koncessionsmineral', 'Mineral'],
+      ['Ägare',              'Owner'],
+      ['Area',               'Area'],
+      ['Giltig från',        'Valid from'],
+      ['Giltig till',        'Valid to'],
+      ['Diary nr',           'Diary nr', { classes: ['feature-attr-dnr'] }],
+      ['Kommun',             'Municipality'],
+      ['Län',                'County'],
+      ['Senast uppdaterad',  'Last updated'],
+    ],
+    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
+        return new Style({
+          zIndex: 21,
+          fill: new Fill({
+            color: [65, 40, 27, Math.max((.2-1)/8 * z + 1, 0)],
+          }),
+          stroke: width === 0 ? undefined : new Stroke({
+            width: width,
+            color: [151, 173, 23, 1],
+          }),
+        });
+      }),
+  },
   svk_lines: {
     popoverTitle: 'Kraftledning (befintlig)',
     popover: [
@@ -510,7 +725,7 @@ const layers = {
     ],
     style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
         return new Style({
-          zIndex: 2,
+          zIndex: 52,
           stroke: new Stroke({
             color: 'black',
             width: width,
@@ -522,7 +737,7 @@ const layers = {
     style: [undefined, undefined, undefined, undefined, undefined]
       .concat([3, 4, 5, 6, 8, 10, 15].map(function(radius) {
           return new Style({
-            zIndex: 1,
+            zIndex: 51,
             image: new CircleStyle({
               radius: radius,
               fill: new Fill({
@@ -561,7 +776,7 @@ const layers = {
   svk_stations: {
     style: [3, 4, 5, 6, 7, 8.5, 10].map(function(radius) {
         return new Style({
-          zIndex: 0,
+          zIndex: 50,
           image: new RegularShape({
             radius: radius,
             points: 4,
@@ -605,6 +820,58 @@ const layerHierarchy = [
       },
     ],
   },
+  {
+    text: 'Mineralrättigheter',
+    children: [
+      {
+        text: 'Bearbetningskoncessioner',
+        children: [
+          {
+            text: 'Beviljad',
+            layer: 'mrr_appr_ec',
+          },
+          {
+            text: 'Ansökt',
+            layer: 'mrr_appl_ec',
+          },
+        ],
+      },
+      {
+        text: 'Undersökningstillstånd, olja, gas och diamant',
+        children: [
+          {
+            text: 'Beviljad',
+            layer: 'mrr_appr_ogd',
+          },
+          {
+            text: 'Ansökt',
+            layer: 'mrr_appl_ogd',
+          },
+        ],
+      },
+      {
+        text: 'Undersökningstillstånd, metaller och industrimineral',
+        children: [
+          {
+            text: 'Beviljad',
+            layer: 'mrr_appr_met',
+          },
+          {
+            text: 'Ansökt',
+            layer: 'mrr_appl_met',
+          },
+        ],
+      },
+      {
+        text: 'Markanvisningar till koncession',
+        layer: 'mrr_appr_dl',
+      },
+      {
+        text: 'Gällande torvkoncessioner',
+        layer: 'mrr_appr_pc',
+      },
+    ],
+  },
 ];
 
 const vectorSource = new VectorTile({
@@ -780,7 +1047,8 @@ map.addLayer(vectorLayer);
     item.appendChild(collapse);
     collapse.id = 'accordion-collapse-' + idx;
     collapse.classList.add('accordion-collapse', 'collapse');
-    // collapse.setAttribute('data-bs-parent', '#' + accordion.id);
+    /* never expand more than accordion at a time */
+    collapse.setAttribute('data-bs-parent', '#' + accordion.id);
 
     btn.type = 'button';
     btn.setAttribute('data-bs-toggle', 'collapse');
diff --git a/style.css b/style.css
index 2ffaef1..655c032 100644
--- a/style.css
+++ b/style.css
@@ -186,9 +186,10 @@ html, body {
 #layer-selection-panel,
 #map-legend-panel {
   position: relative;
-  min-width: min-content;
-  max-width: 35%;
-  width: revert;
+  /*min-width: min-content;*/
+  /*max-width: 35%;*/
+  /*width: revert;*/
+  width: 360px;
   margin-right: 1rem;
   font-size: medium;
   z-index: 0;
@@ -358,6 +359,10 @@ html, body {
 .popover-body table > tbody > tr > td {
   padding: 0.1rem 0.3rem;
 }
+.feature-attr-mrr-license-id, .feature-attr-dnr {
+  font-family: var(--bs-font-monospace);
+  word-wrap: break-word;
+}
 
 .popover-header h6 {
   margin: 0;