diff options
| author | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 04:07:21 +0100 |
|---|---|---|
| committer | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 04:14:17 +0100 |
| commit | 4746a852ec0617561b4a211954a14db2f886bda0 (patch) | |
| tree | 78ba54af33fbd53217f04061b3ab458fd81dfa45 | |
| parent | 11bd74741c90802422d01be69eccf954b012bd34 (diff) | |
Add coordinates and zoom level in the hash part of the URL.
This makes it possible to link to URLs showing specific locations.
| -rw-r--r-- | example.html | 2 | ||||
| -rw-r--r-- | main.js | 59 |
2 files changed, 47 insertions, 14 deletions
diff --git a/example.html b/example.html index f883508..c3d3c1c 100644 --- a/example.html +++ b/example.html @@ -15,7 +15,7 @@ </style> </head> <body> - <iframe src="/" title="Webbkarta" width=500 height=300></iframe> + <iframe src="/#z=0" title="Webbkarta" width=500 height=600></iframe> <p>blah blah blah</p> </body> </html> @@ -93,19 +93,35 @@ const baseMapSource = new WMTS({ }); +const view = new View({ + projection: projection, + extent: extent, + showFullExtent: true, + /* center of the bbox of the Norrbotten and Västerbotten geometries */ + center: [694767.48, 7338176.57], + zoom: 1, + enableRotation: false, + resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, .5], + constrainResolution: false, +}); + +(function() { + const params = new URLSearchParams(window.location.hash.substring(1)); + const x = parseFloat(params.get('x')); + const y = parseFloat(params.get('y')); + if (!isNaN(x) && !isNaN(y)) { + view.setCenter([x, y]); + } + const z = parseFloat(params.get('z')); + if (!isNaN(z)) { + view.setZoom(z); + } +})(); + + const map = new Map({ controls: [], - view: new View({ - projection: projection, - extent: extent, - showFullExtent: true, - /* center of the bbox of the Norrbotten and Västerbotten geometries */ - center: [694767.48, 7338176.57], - zoom: 1, - enableRotation: false, - resolutions: [1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, .5], - constrainResolution: false, - }), + view: view, layers: [ new TileLayer({ source: baseMapSource @@ -330,9 +346,26 @@ document.getElementById('layer-topowebb_nedtonad').onchange = function(event) { baseMapSource.setUrl('https://minkarta.lantmateriet.se/map/topowebbcache?LAYER=' + layer); }; -map.on('singleclick', function (event) { +const TRAILING_ZEROES = /\.?0*$/; +map.on('singleclick', function(event) { const size = map.getSize(); if (window.location !== window.parent.location && (size[0] < 576 || size[1] < 576)) { - return window.open(window.location, '_blank'); + const coordinates = view.getCenter(); + const url = new URL(window.location.href); + const searchParams = new URLSearchParams(url.hash.substring(1)); + searchParams.set('x', coordinates[0].toFixed(2).replace(TRAILING_ZEROES, '')); + searchParams.set('y', coordinates[1].toFixed(2).replace(TRAILING_ZEROES, '')); + searchParams.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, '')); + url.hash = '#' + searchParams.toString(); + return window.open(url.href, '_blank'); } }); + +view.on('change', function(event) { + const coordinates = view.getCenter(); + const searchParams = new URLSearchParams(location.hash.substring(1)); + searchParams.set('x', coordinates[0].toFixed(2).replace(TRAILING_ZEROES, '')); + searchParams.set('y', coordinates[1].toFixed(2).replace(TRAILING_ZEROES, '')); + searchParams.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, '')); + location.hash = '#' + searchParams.toString(); +}); |