From 4746a852ec0617561b4a211954a14db2f886bda0 Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Sun, 14 Jan 2024 04:07:21 +0100 Subject: Add coordinates and zoom level in the hash part of the URL. This makes it possible to link to URLs showing specific locations. --- example.html | 2 +- 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 @@ - +

blah blah blah

diff --git a/main.js b/main.js index b15a7dd..ba799f1 100644 --- a/main.js +++ b/main.js @@ -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(); +}); -- cgit v1.2.3