Populate #layer-selection-panel in JS.

1 files changed, 41 insertions, 5 deletions

diff --git a/main.js b/main.js
index 52e9ecc..9348bbe 100644
--- a/main.js
+++ b/main.js
@@ -361,11 +361,6 @@ const menu = document.getElementById('map-menu');
 /* we're all set, show the control container now */
 container.setAttribute('aria-hidden', 'false');
 
-document.getElementById('layer-topowebb_nedtonad').onchange = function(event) {
-  const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
-  baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer);
-};
-
 const TRAILING_ZEROES = /\.?0*$/;
 map.on('singleclick', function(event) {
   const size = map.getSize();
@@ -389,3 +384,44 @@ view.on('change', function(event) {
     searchParams.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, ''));
     location.hash = '#' + searchParams.toString();
 });
+
+
+/* layer selection panel */
+(function() {
+  const modal = document.getElementById('layer-selection-panel');
+  modal.classList.add('modal');
+  modal.setAttribute('role', 'dialog');
+  modal.setAttribute('aria-hidden', 'true');
+
+  const content = document.createElement('div');
+  modal.appendChild(content);
+  content.classList.add('modal-content');
+
+  const body = document.createElement('div');
+  content.appendChild(body);
+  body.classList.add('modal-body');
+
+  (function() {
+    const div = document.createElement('div');
+    body.appendChild(div);
+    div.classList.add('form-check', 'form-switch');
+
+    const input = document.createElement('input');
+    div.appendChild(input);
+    input.classList.add('form-check-input');
+    input.type = 'checkbox';
+    input.setAttribute('role', 'switch');
+    input.id = 'layer-basemap';
+
+    const label = document.createElement('label');
+    div.appendChild(label);
+    label.classList.add('form-check-label');
+    label.setAttribute('for', input.id);
+    label.innerHTML = 'Nedtonad bakgrund karta';
+
+    input.onchange = function(event) {
+      const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
+      baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer);
+    };
+  })();
+})();