aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html5
-rw-r--r--main.js70
-rw-r--r--style.css8
3 files changed, 57 insertions, 26 deletions
diff --git a/index.html b/index.html
index 79b7bae..78f67f9 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,6 @@
</head>
<body>
<div id="map"></div>
- <div id="map-menu" class="d-none">
- <button id="layer-selection-btn" type="button" aria-expanded="false" title="Byt kartlager">
- <i class="bi bi-stack"></i>
- </button>
- </div>
<div id="layer-selection-panel" class="d-none">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="layer-topowebb_nedtonad">
diff --git a/main.js b/main.js
index f2f3890..e1956fb 100644
--- a/main.js
+++ b/main.js
@@ -23,10 +23,10 @@ import WMTS from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import Attribution from 'ol/control/Attribution.js';
+import FullScreen from 'ol/control/FullScreen.js';
import ScaleLine from 'ol/control/ScaleLine.js';
import Zoom from 'ol/control/Zoom.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';
-import Control from 'ol/control/Control.js';
import proj4 from 'proj4';
import {get as getProjection} from 'ol/proj.js';
@@ -142,31 +142,63 @@ const map = new Map({
source: baseMapSource
}),
],
+ target: document.getElementById('map'),
});
-map.setTarget(document.getElementById('map'));
+/* add the menu to the viewport */
+const menu = document.createElement('div');
+menu.classList.add('d-none');
+menu.id = 'map-menu';
+map.getViewport().appendChild(menu);
+
+/* layer selection button */
(function() {
- const menu = document.getElementById('map-menu');
- map.getViewport().append(menu);
- map.addControl(new Control({
- element: menu,
+ const div = document.createElement('div');
+ menu.append(div);
+ div.classList.add('ol-unselectable', 'ol-control');
+
+ const btn = document.createElement('button');
+ div.appendChild(btn);
+ btn.type = 'button';
+ btn.ariaExpanded = 'false';
+ btn.title = 'Byt kartlager';
+
+ const i = document.createElement('i');
+ btn.appendChild(i);
+ i.classList.add('bi', 'bi-stack');
+
+ btn.onclick = function(event) {
+ const panel = document.getElementById('layer-selection-panel');
+ if (btn.ariaExpanded === 'true') {
+ panel.classList.add('d-none');
+ btn.ariaExpanded = 'false';
+ } else {
+ panel.classList.remove('d-none');
+ btn.ariaExpanded = 'true';
+ }
+ };
+})();
+
+/* fullscreen control */
+(function() {
+ const label = document.createElement('i');
+ label.classList.add('bi', 'bi-fullscreen');
+
+ const labelActive = document.createElement('i');
+ labelActive.classList.add('bi', 'bi-fullscreen-exit');
+
+ map.addControl(new FullScreen({
+ label: label,
+ labelActive: labelActive,
+ tipLabel: 'Växla helskärmsläge',
+ keys: true,
+ target: menu,
}));
- menu.classList.remove('d-none');
})();
-document.getElementById('layer-selection-btn').onclick = function(event) {
- const btn = document.getElementById('layer-selection-btn');
- const panel = document.getElementById('layer-selection-panel');
- if (btn.ariaExpanded === 'true') {
- panel.classList.add('d-none');
- btn.ariaExpanded = 'false';
- } else {
- panel.classList.remove('d-none');
- btn.ariaExpanded = 'true';
- }
-};
+menu.classList.remove('d-none');
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);
-}
+};
diff --git a/style.css b/style.css
index df2c454..9d4383a 100644
--- a/style.css
+++ b/style.css
@@ -182,12 +182,16 @@ html, body {
top: var(--menu-spacing);
margin: 0;
}
-#map-menu button {
+#map-menu > * {
margin-top: var(--menu-spacing-interline);
}
-#map-menu button:first-child {
+#map-menu > *:first-child {
margin-top: 0;
}
+#map-menu > .ol-control {
+ position: relative;
+ inset: initial;
+}
#map-menu button[aria-expanded="true"] {
background-color: var(--ol-subtle-foreground-color);