diff options
| -rw-r--r-- | example.html | 9 | ||||
| -rw-r--r-- | main.js | 46 |
2 files changed, 43 insertions, 12 deletions
diff --git a/example.html b/example.html index c3d3c1c..f461f0d 100644 --- a/example.html +++ b/example.html @@ -8,6 +8,9 @@ body { text-align: center; padding: 1em; + max-width: 960px; + margin: auto; + font-family: "Helvetica Neue", Arial, "Noto Sans", sans-serif; } iframe { border: 1px solid black; @@ -15,7 +18,11 @@ </style> </head> <body> + <p>En sådan översiktskarta kan visas någonstans på hemsidan. Man + kan zooma in och ut men det är liten begränsat. Klickar man på + knappen uppe till höger så öpnar hela kartan i en ny flik. Där kan + man välja lager, ladda ner kartan som PNG-fil, och få information om + de olika föremålen.</p> <iframe src="/#z=0" title="Webbkarta" width=500 height=600></iframe> - <p>blah blah blah</p> </body> </html> @@ -201,8 +201,40 @@ const container = document.getElementById('map-control-container'); map.addControl(control); })(); -/* layer selection button and legend */ const menu = document.getElementById('map-menu'); +const TRAILING_ZEROES = /\.?0*$/; + +/* "open in new tab" button */ +if (window.location !== window.parent.location) { + const div = document.createElement('div'); + menu.appendChild(div); + div.id = 'newtab-button'; + div.classList.add('ol-unselectable', 'ol-control'); + + const btn = document.createElement('button'); + div.appendChild(btn); + btn.type = 'button'; + btn.setAttribute('aria-expanded', 'false'); + btn.title = 'Öppna karta i ny flik'; + btn.classList.add('btn', 'btn-light'); + + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-box-arrow-up-right'); + + btn.onclick = function(event) { + 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'); + }; +} + +/* layer selection button and legend */ (function() { const btn = (function() { const div = document.createElement('div'); @@ -418,18 +450,10 @@ const menu = document.getElementById('map-menu'); /* we're all set, show the control container now */ container.setAttribute('aria-hidden', 'false'); -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)) { - 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'); + if (size[0] < 576 || size[1] < 576) { + return; } }); |