diff options
| author | Martin Fischer <martin@push-f.com> | 2022-10-23 11:50:54 +0200 |
|---|---|---|
| committer | Martin Fischer <martin@push-f.com> | 2022-10-23 11:58:44 +0200 |
| commit | ecf142a7f105471eaf1da421ff1bf55881e6b493 (patch) | |
| tree | a3b508031b1546181e27b7c7df1a256ba472e9ad | |
initial commit
| -rwxr-xr-x | deploy.sh | 6 | ||||
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | script.js | 61 |
3 files changed, 89 insertions, 0 deletions
diff --git a/deploy.sh b/deploy.sh new file mode 100755 index 0000000..1b3c6a9 --- /dev/null +++ b/deploy.sh @@ -0,0 +1,6 @@ +tar cf - index.html script.js | ssh push-f.com 'sh -c " +set -x && +cd /var/www/geopos.link && +rm -rf * && +tar xvf - +"' diff --git a/index.html b/index.html new file mode 100644 index 0000000..3ba426d --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ +<html> + <meta charset="utf-8"> + <title>Share a geographic position</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <body> + <h1 id="heading"></h1> + <div id="instructions" hidden>Open in</div> + <ul id="links"></ul> + <script src="script.js"></script> + <noscript>This website requires JavaScript</noscript> + <style> + body { + max-width: 40ch; + margin: 1em auto; + font-size: 1.2em; + } + li { + padding: 1em; + } + </style> + </body> +</html> diff --git a/script.js b/script.js new file mode 100644 index 0000000..5f07efb --- /dev/null +++ b/script.js @@ -0,0 +1,61 @@ +const fragment = location.hash.substring(1); + +const i = fragment.indexOf('&'); +let latlon; +let params; +if (i != -1) { + latlon = fragment.slice(0, i); + params = Object.fromEntries(new URLSearchParams(fragment.slice(i+1)).entries()); +} else { + latlon = fragment; + params = {}; +} + +const [lat, lon] = latlon.split(','); + +function getLinks(lat, lon, zoom) { + return [ + { + label: 'Google Maps', + url: `https://www.google.com/maps/search/?api=1&query=${lat},${lon}`, + }, + { + label: 'Apple Maps', + url: `https://maps.apple.com/?q=${lat},${lon}&t=m` + }, + { + label: 'Default app', + url: `geo:${lat},${lon}` + }, + { + label: 'OpenStreetMap', + url: `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}&zoom=${zoom}&layers=M` + }, + ] +} + +const heading = document.getElementById('heading'); + +// TODO: listen on hashChange + +if (isNaN(lat) || isNaN(lon)) { + heading.textContent = 'not yet implemented'; +} else { + const zoom = params.z || 15; + const linkList = document.getElementById('links'); + document.getElementById('instructions').hidden = false; + + if (params.name) { + document.title = params.name; + heading.textContent = params.name; + } + + for (const link of getLinks(lat, lon, zoom)) { + const li = document.createElement('li'); + const a = document.createElement('a'); + a.href = link.url; + a.textContent = link.label; + li.appendChild(a); + linkList.appendChild(li); + } +} |