2021-01-23 11:38:26 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>facilmap-leaflet Example</title>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
html, body { width: 100%; height: 100%; margin: 0; }
|
|
|
|
|
body { display: flex; flex-direction: column; }
|
|
|
|
|
#map { flex-grow: 1; }
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
function log(name) {
|
|
|
|
|
return (...args) => { console.log(name, ...args); };
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div style="padding: 10px;">
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Click listener"
|
2021-03-13 23:54:10 +00:00
|
|
|
onclick="L.FacilMap.addClickListener(map, log('click'), log('move'))"
|
2021-01-23 11:38:26 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Default view"
|
2021-03-13 23:54:10 +00:00
|
|
|
onclick="L.FacilMap.displayView(map)"
|
2021-01-23 11:38:26 +00:00
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Hamburg"
|
2021-03-13 23:54:10 +00:00
|
|
|
onclick="L.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"
|
|
|
|
|
value="Berlin to Hamburg"
|
|
|
|
|
onclick="client.setRoute({ routePoints: [{ lat: 52.51704, lon: 13.38886 }, { lat: 53.55034, lon: 10.00065 }], mode: 'car' })"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Clear route"
|
|
|
|
|
onclick="client.clearRoute()"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<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
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
<div id="map"></div>
|
2021-02-28 22:17:26 +00:00
|
|
|
<script src="https://unpkg.com/leaflet"></script>
|
|
|
|
|
<script src="https://unpkg.com/socket.io-client/dist/socket.io.js"></script>
|
|
|
|
|
<script type="text/javascript" src="dist/facilmap-leaflet.full.js"></script>
|
2021-01-23 11:38:26 +00:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var map = L.map('map',{
|
|
|
|
|
center: [0,0],
|
|
|
|
|
zoom: 5,
|
|
|
|
|
});
|
2021-01-31 07:59:12 +00:00
|
|
|
|
2021-02-28 22:17:26 +00:00
|
|
|
var client = new FacilMap.Client("http://localhost:40829/");
|
2021-01-31 07:59:12 +00:00
|
|
|
|
2021-02-28 22:17:26 +00:00
|
|
|
L.FacilMap.setVisibleLayers(map);
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2021-02-28 22:17:26 +00:00
|
|
|
L.control.layers(L.FacilMap.baseLayers, L.FacilMap.overlays).addTo(map);
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2021-01-31 07:59:12 +00:00
|
|
|
new L.FacilMap.BboxHandler(map, client).enable();
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2021-01-31 07:59:12 +00:00
|
|
|
const markersLayer = new L.FacilMap.MarkersLayer(client).addTo(map)
|
|
|
|
|
.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());
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const linesLayer = new L.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());
|
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-01-31 07:59:12 +00:00
|
|
|
});
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2021-02-13 21:56:10 +00:00
|
|
|
const routeLayer = new L.FacilMap.RouteLayer(client, { raised: true }).addTo(map);
|
|
|
|
|
|
|
|
|
|
const searchResultsLayer = new L.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 ]));
|
|
|
|
|
});
|
|
|
|
|
|
2021-01-31 07:59:12 +00:00
|
|
|
const hashHandler = new L.FacilMap.HashHandler(map, client).enable();
|
2021-03-05 07:13:44 +00:00
|
|
|
|
|
|
|
|
async function drawLine() {
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
2021-01-23 11:38:26 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
