ORBIT/flight_map.html at main · ErToBar2/ORBIT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
    <title>ORBIT Flight Planning Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <style>
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; width: 100%; }
        .search-container {
            position: absolute; top: 10px; left: 70px; z-index: 1000;
            background: white; padding: 10px; border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="search-container">
        <input type="text" id="searchInput" placeholder="Enter location" style="width: 200px;">
        <button onclick="searchLocationAndZoom()" style="margin-left: 5px;">Search</button>
    </div>
    <div id="map"></div>
    <script>
        console.log('Initializing ORBIT map...');

        // Create map centered on Belgium (good default for bridge inspection)
        var map = L.map('map').setView([50.8503, 4.3517], 10);
        console.log('Map created');
        // Add street layer
        var osmLayer = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
            maxZoom: 30,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
            attribution: 'Map data &copy; Google'
        });

        // Add satellite layer option
        var satelliteLayer = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
            maxZoom: 30,
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
            attribution: 'Imagery &copy; Google'
        });
        // Add satellite layer as default
        osmLayer.addTo(map);

        // Layer control
        L.control.layers({
            "Street": osmLayer,
            "Satellite": satelliteLayer
        }).addTo(map);

        console.log('Map layers configured');

        // Search functionality
        function searchLocationAndZoom() {
            var address = document.getElementById('searchInput').value;
            if (!address) return;

            // Using Nominatim (OpenStreetMap) geocoding service
            var url = 'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(address);
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data && data.length > 0) {
                        var result = data[0];
                        var lat = parseFloat(result.lat);
                        var lon = parseFloat(result.lon);
                        map.setView([lat, lon], 15);
                        L.marker([lat, lon]).addTo(map)
                            .bindPopup(address)
                            .openPopup();
                        console.log('Searched location: ' + address + ' -> ' + lat + ', ' + lon);
                    } else {
                        alert('Location not found: ' + address);
                    }
                })
                .catch(error => {
                    console.error('Search error:', error);
                    alert('Search failed');
                });
        }

        // Allow search on Enter key
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchLocationAndZoom();
            }
        });

        // WebChannel will be initialized from Qt side after page load
        window.initWebChannelFromQt = function() {
            if (typeof qt !== 'undefined' && qt.webChannelTransport) {
                console.log('Initializing WebChannel from Qt...');
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    window.bridge = channel.objects.bridge;
                    console.log('SUCCESS: WebChannel bridge connected and ready!');
                });
            } else {
                console.log('ERROR: Qt WebChannel transport not available');
            }
        };

        console.log('ORBIT map initialization complete');
    </script>
</body>
</html>