This repository has no description
3.9 kB
140 lines
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>lassulus was here</title>
7 <link rel="stylesheet" href="/leaflet/leaflet.css" />
8 <style>
9 html,
10 body {
11 margin: 0;
12 height: 100%;
13 background: #111;
14 color: #eee;
15 font: 16px/1.4 monospace;
16 }
17 body {
18 display: flex;
19 flex-direction: column;
20 }
21 #map {
22 flex: 1;
23 min-height: 40vh;
24 }
25 #panel {
26 padding: 1em;
27 }
28 #when,
29 #coords {
30 margin: 0 0 0.75em;
31 }
32 #coords {
33 user-select: all;
34 color: #aaa;
35 }
36 #open {
37 display: grid;
38 grid-template-columns: 1fr 1fr;
39 gap: 0.5em;
40 }
41 #open a {
42 display: block;
43 padding: 0.8em;
44 border-radius: 0.4em;
45 text-align: center;
46 text-decoration: none;
47 color: #fff;
48 background: #333;
49 }
50 #open a:active {
51 background: #39f;
52 }
53 #live {
54 display: block;
55 margin-top: 1em;
56 color: #9cf;
57 }
58 </style>
59 </head>
60 <body>
61 <div id="map"></div>
62 <div id="panel">
63 <p id="when"></p>
64 <p id="coords"></p>
65 <div id="open"></div>
66 <a id="live" href="/">live location →</a>
67 </div>
68 <script src="/leaflet/leaflet.js"></script>
69 <script>
70 (function () {
71 // /at#LAT,LON[@UNIXTIME]; the fragment never reaches the server
72 var m = /^#(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)(?:@(\d+))?$/.exec(
73 location.hash,
74 );
75 var lat = m && parseFloat(m[1]),
76 lon = m && parseFloat(m[2]);
77 var when = document.getElementById("when");
78 if (!m || Math.abs(lat) > 90 || Math.abs(lon) > 180) {
79 document.getElementById("map").remove();
80 when.textContent = "no location in this link";
81 return;
82 }
83
84 var map = L.map("map").setView([lat, lon], 16);
85 L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
86 maxZoom: 19,
87 attribution:
88 '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
89 }).addTo(map);
90 L.marker([lat, lon]).addTo(map);
91
92 if (m[3]) {
93 var t = new Date(parseInt(m[3], 10) * 1000);
94 when.textContent = "lassulus was here at " + t.toLocaleString();
95 } else {
96 when.textContent = "lassulus was here";
97 }
98 document.getElementById("coords").textContent = lat + ", " + lon;
99
100 // iOS has no handler for geo: (iPadOS reports itself as a Mac)
101 var ios =
102 /iPad|iPhone|iPod/.test(navigator.userAgent) ||
103 (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
104 var ll = lat + "," + lon;
105 var links = [
106 [
107 "Google Maps",
108 "https://www.google.com/maps/search/?api=1&query=" +
109 encodeURIComponent(ll),
110 ],
111 [
112 "Apple Maps",
113 "https://maps.apple.com/?ll=" + ll + "&q=lassulus",
114 ],
115 // android: app chooser incl. OsmAnd, Organic Maps, ...
116 ios ? null : ["other app", "geo:" + ll + "?q=" + ll + "(lassulus)"],
117 [
118 "OpenStreetMap",
119 "https://www.openstreetmap.org/?mlat=" +
120 lat +
121 "&mlon=" +
122 lon +
123 "#map=16/" +
124 lat +
125 "/" +
126 lon,
127 ],
128 ];
129 var open = document.getElementById("open");
130 links.forEach(function (l) {
131 if (!l) return;
132 var a = document.createElement("a");
133 a.textContent = l[0];
134 a.href = l[1];
135 open.appendChild(a);
136 });
137 })();
138 </script>
139 </body>
140</html>