notfall/notfall.tmpl

41 lines
1.5 KiB
Cheetah
Raw Normal View History

2022-01-16 11:27:54 +00:00
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style type="text/css">
2022-01-16 11:52:37 +00:00
#map { height: 100%; }
2022-01-16 11:27:54 +00:00
</style>
</head>
<body>
<div id="map"></div>
<script>
2022-01-16 11:52:37 +00:00
var map = L.map('map').setView([51.505, -0.09], 18);
2022-01-16 11:27:54 +00:00
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
2022-01-16 11:39:26 +00:00
2022-01-16 11:46:43 +00:00
circle = L.circle([50.5, 30.5], {radius: 200}).addTo(map);
2022-01-16 11:56:28 +00:00
marker = L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
2022-01-16 11:46:43 +00:00
2022-01-16 11:39:26 +00:00
function update() {
fetch('/json')
.then(response => response.json())
2022-01-16 11:42:39 +00:00
.then(data => {
2022-01-16 11:52:37 +00:00
map.setView([data["lat"], data["lon"]], 18);
2022-01-16 11:46:43 +00:00
circle.setLatLng([data["lat"], data["lon"]])
2022-01-16 11:56:28 +00:00
marker.setLatLng([data["lat"], data["lon"]])
2022-01-16 11:58:02 +00:00
marker.bindPopup(data["tst"]).openPopup();
2022-01-16 11:46:43 +00:00
circle.setRadius(data["acc"])
2022-01-16 11:42:39 +00:00
});
2022-01-16 11:39:26 +00:00
}
update()
2022-01-16 11:27:54 +00:00
</script>
</body>