40 lines
1.6 KiB
HTML
40 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Map View</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script>
|
|
window.onload = function() {
|
|
fetch('/map_view')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
mapboxgl.accessToken = data.mapbox_access_token;
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
center: [data.device_data[0].lon, data.device_data[0].lat],
|
|
zoom: 5
|
|
});
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
data.device_data.forEach(device => {
|
|
new mapboxgl.Marker()
|
|
.setLngLat([device.lon, device.lat])
|
|
.setPopup(new mapboxgl.Popup().setHTML(`<h3>${device.name}</h3>`))
|
|
.addTo(map);
|
|
});
|
|
})
|
|
.catch(error => console.error(error));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |