From 22972d7c274e7941b9e18b794dfdb73afef3492a Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Thu, 11 Jan 2024 18:07:19 +0100 Subject: =?UTF-8?q?Add=20a=20simple=20dialog=20to=20switch=20between=20?= =?UTF-8?q?=E2=80=98topowebb=E2=80=99=20and=20=E2=80=98topowebb=5Fnedtonad?= =?UTF-8?q?=E2=80=99.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 104 +++++++++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 70 insertions(+), 34 deletions(-) (limited to 'main.js') diff --git a/main.js b/main.js index f1d36e9..dd365e3 100644 --- a/main.js +++ b/main.js @@ -22,6 +22,10 @@ import TileLayer from 'ol/layer/Tile.js'; import WMTS from 'ol/source/WMTS.js'; import WMTSTileGrid from 'ol/tilegrid/WMTS.js'; +import Zoom from 'ol/control/Zoom.js'; +import Attribution from 'ol/control/Attribution.js'; +import Control from 'ol/control/Control.js'; + import proj4 from 'proj4'; import {get as getProjection} from 'ol/proj.js'; import {register as registerProjection} from 'ol/proj/proj4.js'; @@ -49,7 +53,56 @@ const projection = getProjection('EPSG:3006'); */ const extent = [110720, 6927136, 1159296, 7975712]; +/* XXX using the topowebbcache WMTS is fine for testing (as it + * doesn't require authentication) but not in production in a public + * instance as doing so would violate its current terms of use (as + * of January 2024 it's not CC0 open data). See + * + * https://www.lantmateriet.se/sv/om-lantmateriet/Rattsinformation/upphovsratt-och-publicering-av-lantmateriets-geografiska-information/ + * https://www.lantmateriet.se/sv/kartor/vara-karttjanster/min-karta/#anchor-2 + * https://help.locusmap.eu/topic/support-for-swedish-lantmateriets-min-karta-wms + * + * More precise background maps might be available in the future + * as open data, though: + * + * https://www.lantmateriet.se/sv/om-lantmateriet/press/nyheter/lantmateriets-arbete-mot-oppna-data-i-full-gang/ + */ +const baseMapSource = new WMTS({ + // XXX the 'layer' parameter should be passed in the options + // dictionary (like style and version), but there is no setLayer() + // method to switch from/to the toned down map + url: 'https://minkarta.lantmateriet.se/map/topowebbcache?layer=topowebb', + version: '1.0.0', + style: 'default', + matrixSet: '3006', + format: 'image/png', + tileGrid: new WMTSTileGrid({ + extent: extent, + // https://www.lantmateriet.se/globalassets/geodata/geodatatjanster/tb_twk_visning_cache_v1.1.0.pdf + tileSize: 256, + origin: [-1200000, 8500000], + resolutions: [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, .5], + matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], + }), + projection: projection, + wrapX: false, + crossOrigin: 'anonymous', + attributions: '© Lantmäteriet', +}); + + const map = new Map({ + controls: [ + new Zoom({ + zoomInTipLabel: 'Zooma in', + zoomOutTipLabel: 'Zooma ut', + }), + new Attribution({ + collapsible: true, + collapsed: true, + tipLabel: 'Information', + }), + ], view: new View({ projection: projection, extent: extent, @@ -63,41 +116,24 @@ const map = new Map({ }), layers: [ new TileLayer({ - /* XXX using the topowebbcache WMTS is fine for testing (as it - * doesn't require authentication) but not in production in a public - * instance as doing so would violate its current terms of use (as - * of January 2024 it's not CC0 open data). See - * - * https://www.lantmateriet.se/sv/om-lantmateriet/Rattsinformation/upphovsratt-och-publicering-av-lantmateriets-geografiska-information/ - * https://www.lantmateriet.se/sv/kartor/vara-karttjanster/min-karta/#anchor-2 - * https://help.locusmap.eu/topic/support-for-swedish-lantmateriets-min-karta-wms - * - * More precise background maps might be available in the future - * as open data, though: - * - * https://www.lantmateriet.se/sv/om-lantmateriet/press/nyheter/lantmateriets-arbete-mot-oppna-data-i-full-gang/ - */ - source: new WMTS({ - url: 'https://minkarta.lantmateriet.se/map/topowebbcache', - version: '1.0.0', - layer: 'topowebb', - style: 'default', - matrixSet: '3006', - format: 'image/png', - tileGrid: new WMTSTileGrid({ - extent: extent, - // https://www.lantmateriet.se/globalassets/geodata/geodatatjanster/tb_twk_visning_cache_v1.1.0.pdf - tileSize: 256, - origin: [-1200000, 8500000], - resolutions: [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, .5], - matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], - }), - projection: projection, - wrapX: false, - crossOrigin: 'anonymous', - attributions: '© Lantmäteriet', - }), + source: baseMapSource }), ], target: document.getElementById('map'), }); + +(function() { + const element = document.getElementById('layer-selection-btn'); + map.addControl(new Control({ + element: element, + })); + element.onclick = function(event) { + document.getElementById('layer-selection-dialog').classList.toggle('map-dialog-hidden'); + element.classList.toggle('map-dialog-expanded'); + }; +})(); + +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); +} -- cgit v1.2.3