tmp: loops

amandasaurus · Dec 7, 2023 · 762ba6d · 762ba6d
1 parent 9e8a98c
commit 762ba6d
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/docs/tmp/loops/index.html b/docs/tmp/loops/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+		<!-- HTML Meta Tags -->
+		<title>[TMP] WaterwayMap.org - loops</title>
+
+		<link rel="icon" href="data:,">
+		<link rel=stylesheet href="/style.css" />
+		<link rel="stylesheet" href="/maplibre-gl-2.4.0.css">
+        <script src="/maplibre-gl-2.4.0.js"></script>
+        <script src="/pmtiles-2.7.1.js"></script>
+        <script src="/alpine-3.12.3.js" defer></script>
+		<script src="mapstyle.js"></script>
+        <script src="setup.js"></script>
+
+    </head>
+
+	<body>
+        <header>
+			<h1 class=inline_centre style="margin: 0; margin-top: 0.3ch;"><img src="/img/osm.png" alt="OpenStreetMap logo" style="height: 1em"><span>🏞️ WaterwayMap: Loops</span></h1>
+
+		<div>This area:
+			<a id=open_on_osm x-data
+			   href="#"
+			   class=inline_centre
+			   target=_blank
+			   @click.prevent="let url = `https://www.openstreetmap.org/#map=${Math.round(map.getZoom())}/${map.getBounds().getCenter().lat}/${map.getBounds().getCenter().lng}`; window.open(url);"
+			   @auxclick.prevent="let url = `https://www.openstreetmap.org/#map=${Math.round(map.getZoom())}/${map.getBounds().getCenter().lat}/${map.getBounds().getCenter().lng}`; window.open(url);"
+					>
+					<img src="/img/osm.png" alt="OpenStreetMap logo" style="height: 1em"> osm.org <img src="/img/open_ext.svg" style="height: 1em" />
+			</a>
+			<span id=open_in_josm x-data="{show_josm_not_running: false}">
+				<button class=inline_centre
+						@click="let b = map.getBounds();
+								let url = `http://127.0.0.1:8111/load_and_zoom?top=${b.getNorth()}&amp;bottom=${b.getSouth()}&amp;left=${b.getWest()}&amp;right=${b.getEast()}&amp;changeset_source=${encodeURIComponent(location.href)}&amp;changeset_hashtags=${encodeURIComponent('#RiverMapping;#WaterwayMapOrg')}`;
+								let res_ok = await fetch(url).then(r => r.ok).catch(e => false);
+								this.disabled = false;
+								if (!res_ok) {
+									show_josm_not_running = true;
+									setTimeout(() => show_josm_not_running=false, 5000);
+								}"
+						>
+					<img src="/img/josm.svg" alt="JOSM logo" style="height: 1em"> edit in josm <img src="/img/open_ext.svg" style="height: 1em" />
+				</button>
+				<span x-transition x-show="show_josm_not_running">JOSM isn't running...</span>
+			</span>
+			<span id=open_in_id x-data>
+				<button class=inline_centre
+				   class=inline_centre
+					@click.prevent="let url = `https://www.openstreetmap.org/edit?editor=id#&source=${encodeURIComponent(location.href)}&hashtags=${encodeURIComponent('#RiverMapping;#WaterwayMapOrg')}&map=${Math.round(map.getZoom())}/${map.getBounds().getCenter().lat}/${map.getBounds().getCenter().lng}`;
+						window.open(url);"
+					@auxclick.prevent="let url = `https://www.openstreetmap.org/edit?editor=id#&source=${encodeURIComponent(location.href)}&hashtags=${encodeURIComponent('#RiverMapping;#WaterwayMapOrg')}&map=${Math.round(map.getZoom())}/${map.getBounds().getCenter().lat}/${map.getBounds().getCenter().lng}`;
+						window.open(url);"
+					>
+					<img src="/img/id.svg" alt="iD logo" style="height: 1em">
+					edit in iD <img src="/img/open_ext.svg" style="height: 1em" />
+				</button>
+			</span>
+			<a id=open_geo x-data
+			   href="#"
+			   class=inline_centre
+			   target=_blank
+			   @click.prevent="let url = `geo://${map.getBounds().getCenter().lat},${map.getBounds().getCenter().lng}?z=${Math.round(map.getZoom())}`; window.open(url);"
+			   @auxclick.prevent="let url = `geo://${map.getBounds().getCenter().lat},${map.getBounds().getCenter().lng}?z=${Math.round(map.getZoom())}`; window.open(url);"
+					>
+					geo: url (open on mobile) <img src="/img/open_ext.svg" style="height: 1em" />
+			</a>
+		</div>
+		</header>
+
+		<main>
+			<div id="map"></div>
+		</main>
+
+		<footer class=inline_centre style="padding: 0.5ch; font-size: smaller;">
+			<span>
+				Map Data <img src="/img/osm.png" alt="OpenStreetMap logo" style="height: 1em"> <a href="https://www.openstreetmap.org">© OpenStreetMap contributors</a> (<a href="https://www.openstreetmap.org/copyright">open data licence</a>). 
+			</span>
+			<span>
+				📜 source <a href="https://github.com/amandasaurus/waterwaymap.org"><code>amandasaurus/waterwaymap.org</code> on github</a>
+			</span>
+			<span>
+				<a href="mailto:Amanda McCann <amanda@technomancy.org>?subject=waterwaymap.org%20contact">📧 report problem</a>
+			</span>
+		</footer>
+
+    </body>
+</html>
diff --git a/docs/tmp/loops/mapstyle.js b/docs/tmp/loops/mapstyle.js
@@ -0,0 +1,20 @@
+var mapstyle_layers = [
+	{
+		"id": "osmcarto",
+		"type": "raster",
+		"source": "osmcarto"
+	},
+	{
+		"id":"waterway-line",
+		"type": "line",
+		"source": "waterway",
+		"layout": {
+			"line-cap":  "round",
+			"line-join":  "round"
+		},
+		"paint": {
+			"line-color":  "black",
+			"line-width": 5
+		}
+	}
+];
diff --git a/docs/tmp/loops/setup.js b/docs/tmp/loops/setup.js
@@ -0,0 +1,51 @@
+document.addEventListener("alpine:init", async () => {
+	Alpine.store("tilesets_loaded", false);
+
+	let is_local = (new URL(location.href).port == "8000");
+	let url_prefix;
+	if (is_local) {
+		url_prefix = `http://${location.host}/data/`;
+	} else {
+		url_prefix = "https://pub-02bff1796dd84d2d842f219d10ae945d.r2.dev/2023-04-01/";
+	}
+
+	let key = "planet-cycles"
+	url = `${url_prefix}${key}.geojson`;
+
+	Alpine.store("tilesets_loaded", true);
+
+	map = new maplibregl.Map({
+		container: 'map',
+		zoom: 2,
+		hash: "map",
+		center: [0, 0],
+		style: {
+			version: 8,
+			layers: mapstyle_layers,
+			"glyphs": "/font/{fontstack}/{range}.pbf",
+			sources: {
+				"waterway": {
+					type: "geojson",
+					data: url,
+					cluster: false,
+				},
+				"osmcarto": {
+					type: "raster",
+					tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+					attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
+				},
+			}
+		}
+	});
+	// Add geolocate control to the map.
+	map.addControl(
+		new maplibregl.GeolocateControl({
+			positionOptions: {
+				enableHighAccuracy: true
+			},
+			trackUserLocation: true
+		})
+	);
+	map.addControl(new maplibregl.NavigationControl());
+
+});