From f530d659e5285a163d6874e9a4da15f74bae4219 Mon Sep 17 00:00:00 2001
From: Guilhem Moulin <guilhem@fripost.org>
Date: Thu, 18 Jan 2024 12:52:25 +0100
Subject: Populate #layer-selection-panel in JS.

---
 index.html | 11 +----------
 main.js    | 46 +++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 45887fb..a22f02d 100644
--- a/index.html
+++ b/index.html
@@ -9,16 +9,7 @@
     <div id="map"></div>
     <div id="map-control-container" aria-hidden="true">
       <div id="zoom-control"></div>
-      <div id="layer-selection-panel" class="modal" role="dialog" aria-hidden="true">
-        <div class="modal-content">
-          <div class="modal-body">
-            <div class="form-check form-switch">
-              <input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad">
-              <label class="form-check-label" for="layer-topowebb_nedtonad">Nedtonad bakgrund karta</label>
-            </div>
-          </div>
-        </div>
-      </div>
+      <div id="layer-selection-panel"></div>
       <div id="map-menu"></div>
     </div>
     <div class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
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);
+    };
+  })();
+})();
-- 
cgit v1.2.3