98 lines
3.9 KiB
HTML
98 lines
3.9 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> -->
|
||
<!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 => {
|
||
console.log(data); // Print data to console
|
||
|
||
mapboxgl.accessToken = data.mapbox_access_token;
|
||
|
||
// Center map on logged-in user’s device or first device as fallback
|
||
let centerCoordinates;
|
||
if (data.user_device_data) {
|
||
centerCoordinates = [data.user_device_data.lon, data.user_device_data.lat];
|
||
} else if (data.device_data.length > 0) {
|
||
centerCoordinates = [data.device_data[0].lon, data.device_data[0].lat];
|
||
} else {
|
||
centerCoordinates = [0, 0]; // Default coordinates if no devices found
|
||
}
|
||
|
||
// Initialize the map centered on the logged-in user’s device
|
||
var map = new mapboxgl.Map({
|
||
container: 'map',
|
||
style: 'mapbox://styles/mapbox/streets-v11',
|
||
center: centerCoordinates,
|
||
zoom: 5
|
||
});
|
||
|
||
map.addControl(new mapboxgl.NavigationControl());
|
||
|
||
// Add markers for each device
|
||
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',error));
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|