aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--example.html2
-rw-r--r--main.js59
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>
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();
+});