aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--example.html21
-rw-r--r--main.js7
-rw-r--r--style.css16
3 files changed, 41 insertions, 3 deletions
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..f883508
--- /dev/null
+++ b/example.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Hemsida</title>
+ <style>
+ body {
+ text-align: center;
+ padding: 1em;
+ }
+ iframe {
+ border: 1px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="/" title="Webbkarta" width=500 height=300></iframe>
+ <p>blah blah blah</p>
+ </body>
+</html>
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;
+ }
+}