<!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>