aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--index.html30
-rw-r--r--main.js54
-rw-r--r--style.css22
3 files changed, 88 insertions, 18 deletions
diff --git a/index.html b/index.html
index 78f67f9..bae1dc5 100644
--- a/index.html
+++ b/index.html
@@ -7,12 +7,40 @@
</head>
<body>
<div id="map"></div>
- <div id="layer-selection-panel" class="d-none">
+ <div id="layer-selection-panel" aria-hidden="true">
<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 class="modal" id="modal-info" tabindex="-1" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered modal-lg">
+ <div class="modal-content">
+ <div class="modal-header pb-2">
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body pt-2">
+ <p>Webbkartan skapades av <a href="https://guilhem.se" class="link-dark">Guilhem Datakonsult</a>
+ på uppdrag av <a href="https://www.klimatanalysnorr.se" class="link-body-emphasis">Klimat Analys Norr projektet</a>.</p>
+ <p class="mb-0">Källor och licensinformation:</p>
+ <ul>
+ <li>Bakgrund karta:
+ &copy; <a href="https://lantmateriet.se" target="_blank" class="link-dark">Lantmäteriet</a>, CC0
+ (<a href="https://www.lantmateriet.se/sv/geodata/vara-produkter/oppna-data/#anchor-1" class="link-dark">öppna data</a>).
+ </li>
+ <li>Webbkartan:
+ &copy; <a href="https://guilhem.se" target="_blank" class="link-dark">Guilhem Moulin</a>, AGPLv3+.
+ <a href="https://git.guilhem.org" target="_blank" class="link-body-emphasis">Källkod</a>.
+ </li>
+ <li>Backend-verktyg:
+ &copy; <a href="https://guilhem.se" target="_blank" class="link-dark">Guilhem Moulin</a>, GPLv3+.
+ <a href="https://git.guilhem.org" target="_blank" class="link-body-emphasis">Källkod</a>.
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
<script type="module" src="./main.js"></script>
</body>
</html>
diff --git a/main.js b/main.js
index e1956fb..ff4bd7e 100644
--- a/main.js
+++ b/main.js
@@ -22,7 +22,6 @@ import TileLayer from 'ol/layer/Tile.js';
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';
@@ -32,6 +31,8 @@ import proj4 from 'proj4';
import {get as getProjection} from 'ol/proj.js';
import {register as registerProjection} from 'ol/proj/proj4.js';
+import { Modal } from 'bootstrap';
+
import './style.css';
@@ -89,7 +90,6 @@ const baseMapSource = new WMTS({
projection: projection,
wrapX: false,
crossOrigin: 'anonymous',
- attributions: '&copy; <a href="https://lantmateriet.se" target="_blank">Lantmäteriet</a>',
});
@@ -115,16 +115,6 @@ const map = new Map({
units: 'metric',
minWidth: 150,
}),
- new Attribution({
- collapsible: true,
- collapsed: true,
- tipLabel: 'Information',
- label: (function() {
- const label = document.createElement('i');
- label.classList.add('bi', 'bi-info');
- return label;
- })(),
- }),
],
view: new View({
projection: projection,
@@ -147,7 +137,7 @@ const map = new Map({
/* add the menu to the viewport */
const menu = document.createElement('div');
-menu.classList.add('d-none');
+menu.ariaHidden = 'true';
menu.id = 'map-menu';
map.getViewport().appendChild(menu);
@@ -167,13 +157,13 @@ map.getViewport().appendChild(menu);
btn.appendChild(i);
i.classList.add('bi', 'bi-stack');
+ const panel = document.getElementById('layer-selection-panel');
btn.onclick = function(event) {
- const panel = document.getElementById('layer-selection-panel');
if (btn.ariaExpanded === 'true') {
- panel.classList.add('d-none');
+ panel.ariaHidden = 'true';
btn.ariaExpanded = 'false';
} else {
- panel.classList.remove('d-none');
+ panel.ariaHidden = 'false';
btn.ariaExpanded = 'true';
}
};
@@ -196,7 +186,37 @@ map.getViewport().appendChild(menu);
}));
})();
-menu.classList.remove('d-none');
+/* info button */
+(function() {
+ 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 = 'Visa information';
+
+ const i = document.createElement('i');
+ btn.appendChild(i);
+ i.classList.add('bi', 'bi-info-lg');
+
+ const panel = document.getElementById('modal-info');
+ const modal = new Modal(panel, {});
+ panel.addEventListener('show.bs.modal', function() {
+ btn.ariaExpanded = 'true';
+ });
+ panel.addEventListener('hidden.bs.modal', function() {
+ btn.ariaExpanded = 'false';
+ });
+
+ btn.onclick = function() {
+ modal.toggle()
+ };
+})();
+
+menu.ariaHidden = 'false';
document.getElementById('layer-topowebb_nedtonad').onchange = function(event) {
const layer = event.target.checked ? 'topowebb_nedtonad' : 'topowebb';
diff --git a/style.css b/style.css
index 9d4383a..8eda3c6 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,20 @@ html, body {
--menu-spacing: .5em;
--menu-spacing-interline: .25em;
}
+.modal {
+ --bs-modal-border-width: var(--menu-border-width);
+ --bs-border-radius-lg: var(--menu-border-radius);
+ --bs-modal-border-radius: var(--menu-border-radius);
+ --bs-modal-bg: var(--bs-body-bg);
+ --bs-modal-color: var(--bs-body-color);
+}
+#modal-info .modal-header {
+ border-bottom: none;
+ --bs-modal-header-border-width: 0;
+}
+.btn-close {
+ --bs-btn-close-focus-shadow: none;
+}
@media screen and (max-width: 500px) {
html, body {
--menu-factor-size: 1;
@@ -29,6 +43,10 @@ html, body {
bottom: 0;
width: 100%;
}
+#modal-info.modal {
+ --link-dark-rgb: var(--bs-modal-color);
+ --bs-emphasis-color-rgb: var(--bs-modal-color);
+}
.form-check-input:focus:not(:focus-visible, :hover) {
box-shadow: none;
}
@@ -43,6 +61,10 @@ html, body {
#map-menu, .ol-control {
background-color: transparent;
}
+#map-menu[aria-hidden="true"],
+#layer-selection-panel[aria-hidden="true"] {
+ display: none;
+}
.ol-control button,
#map-menu button,
#layer-selection-panel {