diff options
| author | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 00:23:53 +0100 |
|---|---|---|
| committer | Guilhem Moulin <guilhem@fripost.org> | 2024-01-14 04:14:17 +0100 |
| commit | ede24258052a37ab6db54553a3d4d846b1870b6c (patch) | |
| tree | 76e890299bda5af56f21dd775e2a8a4e4d89f5e8 | |
| parent | a95bd079fd3b2639c0c1e4b0b637fa67c0a2e4ac (diff) | |
Add an example with a page containg the map in an <iframe>.
| -rw-r--r-- | example.html | 21 | ||||
| -rw-r--r-- | main.js | 7 | ||||
| -rw-r--r-- | style.css | 16 |
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> @@ -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'); + } +}); @@ -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; + } +} |