facilmap/leaflet/example.html

230 wiersze
7.6 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>facilmap-leaflet Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
#map-container { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
#map { flex-grow: 1; }
#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 }
</style>
<script>
function log(name) {
return (...args) => { console.log(name, ...args); };
}
</script>
</head>
<body>
<div style="padding: 10px;">
<input
type="button"
value="Click listener"
onclick="FacilMap.addClickListener(map, log('click'), log('move'))"
/>
<input
type="button"
value="Default view"
onclick="FacilMap.displayView(map)"
/>
<input
type="button"
value="Hamburg"
onclick="FacilMap.displayView(map, { top: 53.959, left: 8.331, right: 9.650, bottom: 53.767, baseLayer: 'MpnW', layers: ['FrTo'] })"
/>
<input
type="button"
value="Open map wqxygV4R506PlBlZ"
onclick="client.setPadId('wqxygV4R506PlBlZ').catch(log('setPadId error'))"
/>
<a href="http://localhost:40829/wqxygV4R506PlBlZ" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg=="></a>
<input
type="button"
value="Toggle filter name ~= &quot;test&quot;"
onclick="map.setFmFilter(map.fmFilter ? undefined : 'name ~= &quot;test&quot;')"
/>
<input
type="button"
value="Route 1"
onclick="client.setRoute({ routePoints: [{ lat: 52.51704, lon: 13.38886 }, { lat: 53.55034, lon: 10.00065 }], mode: 'car' })"
/>
<input
type="button"
value="Clear route 1"
onclick="client.clearRoute()"
/>
<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' })"
/>
<input
type="button"
value="Search for &quot;Berlin&quot;"
onclick="client.find({ query: 'Berlin' }).then((res) => { searchResultsLayer.setResults(res) }).catch((err) => { console.error(err); })"
/>
<input
type="button"
value="Clear search"
onclick="searchResultsLayer.setResults([]);"
/>
<input
type="button"
value="parking+recycling"
onclick="overpassLayer.setQuery('(nwr[amenity=parking];nwr[amenity=recycling];);')"
/>
<input
type="button"
value="parking+recycling (preset)"
onclick="overpassLayer.setQuery(FacilMap.getOverpassPresets(['parking', 'recycling']))"
/>
<input
type="button"
value="Clear amenities"
onclick="overpassLayer.setQuery()"
/>
<input
type="button"
value="Draw line"
onclick="drawLine()"
/>
<input
type="button"
value="End draw line"
onclick="linesLayer.endDrawLine(confirm('Save?'))"
/>
</div>
<div id="map-container">
<div id="map"></div>
<div id="overpass-status"></div>
</div>
<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',{
center: [0,0],
zoom: 5,
});
window.client = new Client("http://localhost:40829/");
FacilMap.setVisibleLayers(map);
const layers = FacilMap.getLayers(map);
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);
new FacilMap.BboxHandler(map, client).enable();
const markersLayer = new FacilMap.MarkersLayer(client).addTo(map)
.on("click", (e) => {
markersLayer.setHighlightedMarkers(new Set([e.layer.marker.id]));
linesLayer.setHighlightedLines(new Set());
searchResultsLayer.setHighlightedResults(new Set());
overpassLayer.setHighlightedElements(new Set());
});
window.linesLayer = new FacilMap.LinesLayer(client).addTo(map)
.on("click", (e) => {
L.DomEvent.stopPropagation(e);
markersLayer.setHighlightedMarkers(new Set());
linesLayer.setHighlightedLines(new Set([e.layer.line.id]));
searchResultsLayer.setHighlightedResults(new Set());
overpassLayer.setHighlightedElements(new Set());
});
map.on("click", () => {
markersLayer.setHighlightedMarkers(new Set());
linesLayer.setHighlightedLines(new Set());
searchResultsLayer.setHighlightedResults(new Set());
overpassLayer.setHighlightedElements(new Set());
});
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();
setTimeout(() => {
routeDragHandler.enableForLayer(routeLayer1);
routeDragHandler.enableForLayer(routeLayer2);
}, 0);
window.searchResultsLayer = new FacilMap.SearchResultsLayer().addTo(map)
.on("click", (e) => {
L.DomEvent.stopPropagation(e);
markersLayer.setHighlightedMarkers(new Set());
linesLayer.setHighlightedLines(new Set());
searchResultsLayer.setHighlightedResults(new Set([ e.layer._fmSearchResult ]));
overpassLayer.setHighlightedElements(new Set());
});
let overpassLoading = 0;
const overpassStatus = document.getElementById("overpass-status");
window.overpassLayer = new FacilMap.OverpassLayer([], { markerShape: "rectangle-marker" }).addTo(map)
.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) {
if (e.status == FacilMap.OverpassLoadStatus.COMPLETE)
overpassStatus.style.opacity = 0;
else if (e.status == FacilMap.OverpassLoadStatus.INCOMPLETE)
overpassStatus.innerText = "Not all POIs are shown because there are too many results. Zoom in to show all results.";
else if (e.status == FacilMap.OverpassLoadStatus.TIMEOUT)
overpassStatus.innerText = "Zoom in to show POIs.";
else if (e.status == FacilMap.OverpassLoadStatus.ERROR)
overpassStatus.innerText = "Error loading POIs: " + e.error.message;
}
console.log("Overpass", e);
})
.on("clear", () => {
overpassStatus.style.opacity = 0;
});
const hashHandler = new FacilMap.HashHandler(map, client, { overpassLayer }).enable();
window.drawLine = async () => {
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);
}
};
</script>
</body>
</html>