Skip to content

Commit

Permalink
ends
Browse files Browse the repository at this point in the history
  • Loading branch information
@amandasaurus
amandasaurus committed Jan 22, 2024
1 parent 4a752b4 commit c804a45
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 0 deletions.
107 changes: 107 additions & 0 deletions docs/ends/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<!-- HTML Meta Tags -->
<title>WaterwayMap.org - End points</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="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: End points</span></h1>

<div>Places where waterways end in OpenStreetMap. Please wait for data to load.</div>
<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_josm_new_layer 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?new_layer=true&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 (new layer) <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.toFixed(5)},${map.getBounds().getCenter().lng.toFixed(5)}?z=${Math.round(map.getZoom())}`; window.open(url);"
@auxclick.prevent="let url = `geo:${map.getBounds().getCenter().lat.toFixed(5)},${map.getBounds().getCenter().lng.toFixed(5)}?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>
<span>
<a href="https://en.osm.town/@amapanda/tagged/WaterwayMapOrg">Updates on Social Media: <code>#WaterwayMapOrg</code> from @amapanda@en.osm.town</a>
</span>
</footer>

</body>
</html>
93 changes: 93 additions & 0 deletions docs/ends/setup.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
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/";
}

// add the PMTiles plugin to the maplibregl global.
let protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);

let key = "planet-ends"
url = `${url_prefix}${key}.pmtiles`;

var p = new pmtiles.PMTiles(url)
// this is so we share one instance across the JS code and the map renderer
protocol.add(p);


Alpine.store("tilesets_loaded", true);

map = new maplibregl.Map({
container: 'map',
zoom: 2,
hash: "map",
center: [0, 0],
style: {
version: 8,
layers: [
{
"id": "osmcarto",
"type": "raster",
"source": "osmcarto",
},
{
"id":"ends",
"source": "ends",
"source-layer":"ends",
"type": "circle",
"paint": {
"circle-color": "black",
"circle-radius": ["interpolate", ["linear"], ["get", "upstream_m"], 0, 0, 10*1000, 1, 1000*1000, 10]
}
},
{
"id":"ends-text",
"source": "ends",
"source-layer":"ends",
"type": "symbol",
"paint": {
"text-color": "black",
},
"filter": [">", ["get", "upstream_m"], 10*1000],
"layout": {
"text-font": [ "Open Sans Semibold" ],
"text-field": ["concat", ["round", ["/", ["get", "upstream_m"], 1000]], " km"],
"text-offset": [0, 1],
"text-size": ["interpolate", ["linear"], ["get", "upstream_m"], 0, 0, 1000*1000, 15]
}
}
],
"glyphs": "/font/{fontstack}/{range}.pbf",
sources: {
"ends": {
type: "vector",
url: "pmtiles://" + url,
attribution: '© <a href="https://openstreetmap.org">OpenStreetMap</a>'
},
"osmcarto": {
type: "raster",
tileSize: 256,
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());

});

0 comments on commit c804a45

Please sign in to comment.