78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
window.onload = function() {
|
|
fetch('/map_view')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
mapboxgl.accessToken = data.mapbox_access_token;
|
|
|
|
var map1 = new mapboxgl.Map({
|
|
container: 'map_view_bg',
|
|
style: 'mapbox://styles/mapbox/dark-v10',
|
|
center: [data.device_data[0].lon, data.device_data[0].lat],
|
|
zoom: 5
|
|
});
|
|
map1.addControl(new mapboxgl.NavigationControl());
|
|
addMarkers(map1, data.device_data);
|
|
|
|
|
|
var map2 = new mapboxgl.Map({
|
|
container: 'mapTop',
|
|
style: 'mapbox://styles/mapbox/dark-v10',
|
|
center: [data.device_data[0].lon, data.device_data[0].lat],
|
|
zoom: 2
|
|
});
|
|
map2.addControl(new mapboxgl.NavigationControl());
|
|
addMarkers(map2, data.device_data);
|
|
|
|
// Default selection
|
|
var defaultDeviceID = window.localStorage.getItem("deviceId")
|
|
if(defaultDeviceID){
|
|
window.localStorage.setItem("deviceId",defaultDeviceID)
|
|
}else{
|
|
defaultDeviceID = "xAq9W1PO5rmAuuQ"
|
|
window.localStorage.setItem("deviceId",defaultDeviceID)
|
|
}
|
|
|
|
var defaultDevice = data.device_data.find(device => device.device_id === defaultDeviceID);
|
|
if (defaultDevice) {
|
|
var defaultMarker = new mapboxgl.Marker()
|
|
.setLngLat([defaultDevice.lon, defaultDevice.lat])
|
|
.setPopup(new mapboxgl.Popup().setHTML(`<h3>${defaultDevice.name}</h3>`))
|
|
// .addTo(map0);
|
|
|
|
defaultMarker.getElement().click();
|
|
updateDeviceData(defaultDevice);
|
|
}
|
|
})
|
|
}
|
|
|
|
function addMarkers(map, device_data) {
|
|
device_data.forEach(device => {
|
|
var marker = new mapboxgl.Marker()
|
|
.setLngLat([device.lon, device.lat])
|
|
.setPopup(new mapboxgl.Popup().setHTML(`<h3>${device.name}</h3>`))
|
|
.addTo(map);
|
|
|
|
marker.getElement().addEventListener('click', function() {
|
|
|
|
updateDeviceData(device);
|
|
// console.log(device.device_id,"device id");
|
|
window.localStorage.setItem("deviceId",device.device_id)
|
|
// console.log(window.localStorage.getItem("deviceId"));
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateDeviceData(device) {
|
|
document.querySelector('.ipNumber').innerText = `${device.pod}`;
|
|
let date = new Date().toLocaleString('en-US', { timeZone: device.timezone });
|
|
document.querySelector('#timezone_date').innerText = `${date}`;
|
|
|
|
// Check if the timezone is Singapore
|
|
if (device.timezone === "Singapore") {
|
|
document.querySelector('#singaporetext').style.display = "none"; // Show
|
|
} else {
|
|
document.querySelector('#singaporetext').style.display = "none"; // Hide
|
|
}
|
|
}
|