aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html11
-rw-r--r--main.js46
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);
+ };
+ })();
+})();