diff options
| -rw-r--r-- | index.html | 30 | ||||
| -rw-r--r-- | main.js | 54 | ||||
| -rw-r--r-- | style.css | 22 |
3 files changed, 88 insertions, 18 deletions
@@ -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: + © <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: + © <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: + © <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> @@ -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: '© <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'; @@ -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 { |