This repository has no description
2.6 kB
92 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 <link rel="stylesheet" href="/maps.css" />
9 <style>
10 html,
11 body {
12 margin: 0;
13 height: 100%;
14 background: #111;
15 color: #eee;
16 font: 16px/1.4 monospace;
17 }
18 body {
19 display: flex;
20 flex-direction: column;
21 }
22 #map {
23 flex: 1;
24 min-height: 40vh;
25 }
26 #panel {
27 padding: 1em;
28 }
29 #when,
30 #coords {
31 margin: 0 0 0.75em;
32 }
33 #coords {
34 user-select: all;
35 color: #aaa;
36 }
37 #live {
38 display: block;
39 margin-top: 1em;
40 color: #9cf;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="map"></div>
46 <div id="panel">
47 <p id="when"></p>
48 <p id="coords"></p>
49 <div id="open" class="open"></div>
50 <a id="live" href="/">live location →</a>
51 </div>
52 <script src="/leaflet/leaflet.js"></script>
53 <script src="/maps.js"></script>
54 <script>
55 (function () {
56 // /at#LAT,LON[@UNIXTIME]; the fragment never reaches the server
57 window.addEventListener("hashchange", function () {
58 location.reload();
59 });
60 var m = /^#(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)(?:@(\d+))?$/.exec(
61 location.hash,
62 );
63 var lat = m && parseFloat(m[1]),
64 lon = m && parseFloat(m[2]);
65 var when = document.getElementById("when");
66 if (!m || Math.abs(lat) > 90 || Math.abs(lon) > 180) {
67 document.getElementById("map").remove();
68 when.textContent = "no location in this link";
69 return;
70 }
71
72 var map = L.map("map").setView([lat, lon], 16);
73 L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
74 maxZoom: 19,
75 attribution:
76 '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
77 }).addTo(map);
78 L.marker([lat, lon]).addTo(map);
79
80 if (m[3]) {
81 var t = new Date(parseInt(m[3], 10) * 1000);
82 when.textContent = "lassulus was here at " + t.toLocaleString();
83 } else {
84 when.textContent = "lassulus was here";
85 }
86 document.getElementById("coords").textContent = lat + ", " + lon;
87
88 renderMapLinks(document.getElementById("open"), lat, lon);
89 })();
90 </script>
91 </body>
92</html>