2021-01-23 11:38:26 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>facilmap-leaflet Example</title>
|
2023-04-07 16:39:59 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
2021-01-23 11:38:26 +00:00
|
|
|
<style type="text/css">
|
|
|
|
|
html, body { width: 100%; height: 100%; margin: 0; }
|
|
|
|
|
body { display: flex; flex-direction: column; }
|
2021-05-15 16:26:45 +00:00
|
|
|
#map-container { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
|
2021-01-23 11:38:26 +00:00
|
|
|
#map { flex-grow: 1; }
|
2021-05-15 16:26:45 +00:00
|
|
|
#overpass-status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 10px; background: #fff; z-index: 10000; transition: opacity 0.4s; opacity: 0; border-radius: 3px }
|
2021-01-23 11:38:26 +00:00
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
function log(name) {
|
|
|
|
|
return (...args) => { console.log(name, ...args); };
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div style="padding: 10px;">
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Click listener"
|
2023-04-07 16:39:59 +00:00
|
|
|
onclick="FacilMap.addClickListener(map, log('click'), log('move'))"
|
2021-01-23 11:38:26 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Default view"
|
2023-04-07 16:39:59 +00:00
|
|
|
onclick="FacilMap.displayView(map)"
|
2021-01-23 11:38:26 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Hamburg"
|
2023-04-07 16:39:59 +00:00
|
|
|
onclick="FacilMap.displayView(map, { top: 53.959, left: 8.331, right: 9.650, bottom: 53.767, baseLayer: 'MpnW', layers: ['FrTo'] })"
|
2021-01-23 11:38:26 +00:00
|
|
|
/>
|
2021-01-31 07:59:12 +00:00
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Open map wqxygV4R506PlBlZ"
|
|
|
|
|
onclick="client.setPadId('wqxygV4R506PlBlZ').catch(log('setPadId error'))"
|
|
|
|
|
/>
|
2021-02-13 21:56:10 +00:00
|
|
|
<a href="http://localhost:40829/wqxygV4R506PlBlZ" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg=="></a>
|
2021-01-31 07:59:12 +00:00
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Toggle filter name ~= "test""
|
|
|
|
|
onclick="map.setFmFilter(map.fmFilter ? undefined : 'name ~= "test"')"
|
|
|
|
|
/>
|
2021-02-13 21:56:10 +00:00
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
2021-03-25 19:34:48 +00:00
|
|
|
value="Route 1"
|
2021-02-13 21:56:10 +00:00
|
|
|
onclick="client.setRoute({ routePoints: [{ lat: 52.51704, lon: 13.38886 }, { lat: 53.55034, lon: 10.00065 }], mode: 'car' })"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
2021-03-25 19:34:48 +00:00
|
|
|
value="Clear route 1"
|
2021-02-13 21:56:10 +00:00
|
|
|
onclick="client.clearRoute()"
|
|
|
|
|
/>
|
|
|
|
|
|
2021-03-25 19:34:48 +00:00
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Route 2"
|
|
|
|
|
onclick="client.setRoute({ routeId: 'route2', routePoints: [{ lat: 51.34063, lon: 12.37473 }, { lat: 53.07582, lon: 8.80716 }], mode: 'car' })"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Clear route 2"
|
|
|
|
|
onclick="client.clearRoute({ routeId: 'route2' })"
|
|
|
|
|
/>
|
|
|
|
|
|
2021-02-13 21:56:10 +00:00
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Search for "Berlin""
|
|
|
|
|
onclick="client.find({ query: 'Berlin' }).then((res) => { searchResultsLayer.setResults(res) }).catch((err) => { console.error(err); })"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Clear search"
|
|
|
|
|
onclick="searchResultsLayer.setResults([]);"
|
|
|
|
|
/>
|
2021-03-05 07:13:44 +00:00
|
|
|
|
2021-05-15 16:26:45 +00:00
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="parking+recycling"
|
|
|
|
|
onclick="overpassLayer.setQuery('(nwr[amenity=parking];nwr[amenity=recycling];);')"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="parking+recycling (preset)"
|
2023-04-07 16:39:59 +00:00
|
|
|
onclick="overpassLayer.setQuery(FacilMap.getOverpassPresets(['parking', 'recycling']))"
|
2021-05-15 16:26:45 +00:00
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Clear amenities"
|
|
|
|
|
onclick="overpassLayer.setQuery()"
|
|
|
|
|
/>
|
|
|
|
|
|
2021-03-05 07:13:44 +00:00
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Draw line"
|
|
|
|
|
onclick="drawLine()"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="End draw line"
|
|
|
|
|
onclick="linesLayer.endDrawLine(confirm('Save?'))"
|
|
|
|
|
/>
|
2021-01-23 11:38:26 +00:00
|
|
|
</div>
|
2021-05-15 16:26:45 +00:00
|
|
|
<div id="map-container">
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
<div id="overpass-status"></div>
|
|
|
|
|
</div>
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
<script type="module">
|
|
|
|
|
import L from "leaflet";
|
|
|
|
|
import Client from "facilmap-client";
|
|
|
|
|
import * as FacilMap from "facilmap-leaflet";
|
|
|
|
|
|
|
|
|
|
window.FacilMap = FacilMap;
|
|
|
|
|
|
|
|
|
|
window.map = L.map('map',{
|
2021-01-23 11:38:26 +00:00
|
|
|
center: [0,0],
|
|
|
|
|
zoom: 5,
|
|
|
|
|
});
|
2021-01-31 07:59:12 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
window.client = new Client("http://localhost:40829/");
|
2021-01-31 07:59:12 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
FacilMap.setVisibleLayers(map);
|
2021-04-17 17:46:01 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
const layers = FacilMap.getLayers(map);
|
2021-04-17 16:43:49 +00:00
|
|
|
const byName = (layerMap) => Object.fromEntries(Object.entries(layerMap).map(([key, layer]) => [layer.options.fmName, layer]));
|
|
|
|
|
L.control.layers(byName(layers.baseLayers), byName(layers.overlays)).addTo(map);
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
new FacilMap.BboxHandler(map, client).enable();
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
const markersLayer = new FacilMap.MarkersLayer(client).addTo(map)
|
2021-01-31 07:59:12 +00:00
|
|
|
.on("click", (e) => {
|
2021-02-13 21:56:10 +00:00
|
|
|
markersLayer.setHighlightedMarkers(new Set([e.layer.marker.id]));
|
|
|
|
|
linesLayer.setHighlightedLines(new Set());
|
|
|
|
|
searchResultsLayer.setHighlightedResults(new Set());
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassLayer.setHighlightedElements(new Set());
|
2021-02-13 21:56:10 +00:00
|
|
|
});
|
2021-04-17 17:46:01 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
window.linesLayer = new FacilMap.LinesLayer(client).addTo(map)
|
2021-02-13 21:56:10 +00:00
|
|
|
.on("click", (e) => {
|
|
|
|
|
L.DomEvent.stopPropagation(e);
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set());
|
|
|
|
|
linesLayer.setHighlightedLines(new Set([e.layer.line.id]));
|
|
|
|
|
searchResultsLayer.setHighlightedResults(new Set());
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassLayer.setHighlightedElements(new Set());
|
2021-01-31 07:59:12 +00:00
|
|
|
});
|
2021-04-17 17:46:01 +00:00
|
|
|
|
2021-01-31 07:59:12 +00:00
|
|
|
map.on("click", () => {
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set());
|
2021-02-13 21:56:10 +00:00
|
|
|
linesLayer.setHighlightedLines(new Set());
|
|
|
|
|
searchResultsLayer.setHighlightedResults(new Set());
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassLayer.setHighlightedElements(new Set());
|
2021-01-31 07:59:12 +00:00
|
|
|
});
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
const routeLayer1 = new FacilMap.RouteLayer(client, undefined, { raised: true }).addTo(map);
|
|
|
|
|
const routeLayer2 = new FacilMap.RouteLayer(client, "route2", { raised: true }).addTo(map);
|
|
|
|
|
const routeDragHandler = new FacilMap.RouteDragHandler(map, client).enable();
|
2021-10-09 18:26:23 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
|
routeDragHandler.enableForLayer(routeLayer1);
|
|
|
|
|
routeDragHandler.enableForLayer(routeLayer2);
|
|
|
|
|
}, 0);
|
2021-02-13 21:56:10 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
window.searchResultsLayer = new FacilMap.SearchResultsLayer().addTo(map)
|
2021-02-13 21:56:10 +00:00
|
|
|
.on("click", (e) => {
|
|
|
|
|
L.DomEvent.stopPropagation(e);
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set());
|
|
|
|
|
linesLayer.setHighlightedLines(new Set());
|
|
|
|
|
searchResultsLayer.setHighlightedResults(new Set([ e.layer._fmSearchResult ]));
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassLayer.setHighlightedElements(new Set());
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let overpassLoading = 0;
|
|
|
|
|
const overpassStatus = document.getElementById("overpass-status");
|
2023-04-07 16:39:59 +00:00
|
|
|
window.overpassLayer = new FacilMap.OverpassLayer([], { markerShape: "rectangle-marker" }).addTo(map)
|
2021-05-15 16:26:45 +00:00
|
|
|
.on("click", (e) => {
|
|
|
|
|
console.log(e.layer._fmOverpassElement.tags);
|
|
|
|
|
L.DomEvent.stopPropagation(e);
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set());
|
|
|
|
|
linesLayer.setHighlightedLines(new Set());
|
|
|
|
|
searchResultsLayer.setHighlightedResults(new Set());
|
|
|
|
|
overpassLayer.setHighlightedElements(new Set([e.layer._fmOverpassElement]));
|
|
|
|
|
})
|
|
|
|
|
.on("loadstart", () => {
|
|
|
|
|
overpassLoading++;
|
|
|
|
|
overpassStatus.innerText = "Loading POIs…";
|
|
|
|
|
overpassStatus.style.opacity = 1;
|
|
|
|
|
})
|
|
|
|
|
.on("loadend", (e) => {
|
|
|
|
|
if (--overpassLoading <= 0) {
|
2023-04-07 16:39:59 +00:00
|
|
|
if (e.status == FacilMap.OverpassLoadStatus.COMPLETE)
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassStatus.style.opacity = 0;
|
2023-04-07 16:39:59 +00:00
|
|
|
else if (e.status == FacilMap.OverpassLoadStatus.INCOMPLETE)
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassStatus.innerText = "Not all POIs are shown because there are too many results. Zoom in to show all results.";
|
2023-04-07 16:39:59 +00:00
|
|
|
else if (e.status == FacilMap.OverpassLoadStatus.TIMEOUT)
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassStatus.innerText = "Zoom in to show POIs.";
|
2023-04-07 16:39:59 +00:00
|
|
|
else if (e.status == FacilMap.OverpassLoadStatus.ERROR)
|
2021-05-15 16:26:45 +00:00
|
|
|
overpassStatus.innerText = "Error loading POIs: " + e.error.message;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("Overpass", e);
|
2021-05-16 22:14:21 +00:00
|
|
|
})
|
|
|
|
|
.on("clear", () => {
|
|
|
|
|
overpassStatus.style.opacity = 0;
|
2021-02-13 21:56:10 +00:00
|
|
|
});
|
|
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
const hashHandler = new FacilMap.HashHandler(map, client, { overpassLayer }).enable();
|
2021-03-05 07:13:44 +00:00
|
|
|
|
2023-04-07 16:39:59 +00:00
|
|
|
window.drawLine = async () => {
|
2021-03-05 07:13:44 +00:00
|
|
|
try {
|
|
|
|
|
const lineTemplate = await client.getLineTemplate({ typeId: Object.keys(client.types).find((type) => client.types[type].type == "line") });
|
|
|
|
|
const result = await linesLayer.drawLine(lineTemplate);
|
|
|
|
|
console.log(result);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(err);
|
|
|
|
|
}
|
2023-04-07 16:39:59 +00:00
|
|
|
};
|
2021-01-23 11:38:26 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
