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"
|
|
|
|
|
onclick="L.FacilMap.ClickListener.addClickListener(map, log('click'), log('move'))"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Default view"
|
|
|
|
|
onclick="L.FacilMap.Views.displayView(map)"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Hamburg"
|
|
|
|
|
onclick="L.FacilMap.Views.displayView(map, { top: 53.959, left: 8.331, right: 9.650, bottom: 53.767, baseLayer: 'MpnW', layers: ['FrTo'] })"
|
|
|
|
|
/>
|
2021-01-31 07:59:12 +00:00
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Open map wqxygV4R506PlBlZ"
|
|
|
|
|
onclick="client.setPadId('wqxygV4R506PlBlZ').catch(log('setPadId error'))"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<input
|
|
|
|
|
type="button"
|
|
|
|
|
value="Toggle filter name ~= "test""
|
|
|
|
|
onclick="map.setFmFilter(map.fmFilter ? undefined : 'name ~= "test"')"
|
|
|
|
|
/>
|
2021-01-23 11:38:26 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
|
|
|
|
<script type="text/javascript" src="dist/facilmap-leaflet.js"></script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var map = L.map('map',{
|
|
|
|
|
center: [0,0],
|
|
|
|
|
zoom: 5,
|
|
|
|
|
});
|
2021-01-31 07:59:12 +00:00
|
|
|
|
|
|
|
|
var client = new L.FacilMap.Socket("http://localhost:40829/");
|
|
|
|
|
|
2021-01-23 11:38:26 +00:00
|
|
|
L.FacilMap.Layers.setVisibleLayers(map);
|
|
|
|
|
|
|
|
|
|
L.control.layers(L.FacilMap.Layers.baseLayers, L.FacilMap.Layers.overlays).addTo(map);
|
|
|
|
|
|
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) => {
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set([e.layer.options.marker.id]));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
map.on("click", () => {
|
|
|
|
|
markersLayer.setHighlightedMarkers(new Set());
|
|
|
|
|
});
|
2021-01-23 11:38:26 +00:00
|
|
|
|
2021-01-31 07:59:12 +00:00
|
|
|
const hashHandler = new L.FacilMap.HashHandler(map, client).enable();
|
2021-01-23 11:38:26 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
