From ede24258052a37ab6db54553a3d4d846b1870b6c Mon Sep 17 00:00:00 2001 From: Guilhem Moulin Date: Sun, 14 Jan 2024 00:23:53 +0100 Subject: Add an example with a page containg the map in an +

blah blah blah

+ + diff --git a/main.js b/main.js index b5df865..b15a7dd 100644 --- a/main.js +++ b/main.js @@ -329,3 +329,10 @@ 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); }; + +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'); + } +}); diff --git a/style.css b/style.css index cbb4c02..2d46640 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,6 @@ html, body { --ol-brand-color: red; } - #map { position: absolute; top: 0; @@ -103,7 +102,7 @@ html, body { border: 1px solid var(--bs-body-color); border-top: none; color: var(--bs-body-color); - font-size: small; + font-size: 80%; margin: 0; } @@ -201,13 +200,15 @@ html, body { #map-menu .ol-full-screen { display: none; } +} +@media screen and (min-width: 350px) and (max-width: 576px) { #map-menu #info-button { bottom: 0; right: 0; position: absolute; } } -@media screen and (max-height: 576px) { +@media screen and (max-height: 576px), (max-width: 500px) { #zoom-control .ol-zoomslider { display: none; } @@ -217,3 +218,12 @@ html, body { max-width: 60%; } } +@media screen and (max-height: 300px) { + body { + --bs-body-font-size: .8rem; + } + .ol-control button.btn { + --bs-btn-padding-x: 0.4rem; + --bs-btn-padding-y: 0.4rem; + } +} -- cgit v1.2.3