Slug_Hub/map.html at main · DNA-System-Corp/Slug_Hub · 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
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
  <head>
    <title>Smart Map</title>
    <meta charset="utf-8" />
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <script>
      let map;
      let directionsService;
      let directionsRenderer;
      let userLocation = null;
      let mapReady = false;
      let webChannelReady = false;
      let currentTravelMode = "DRIVING";
      let pendingDestination = null;

      function notifyIfFullyReady() {
        if (mapReady && userLocation && webChannelReady && window.bridge?.mapReady) {
          console.log("🧠 All systems ready — notifying Python.");
          window.bridge.mapReady();
        }
      }

      window.initMap = function () {
        console.log("🗺️ initMap started");

        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 36.9914, lng: -122.0609 },
          zoom: 14
        });

        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);

        // Setup WebChannel
        new QWebChannel(qt.webChannelTransport, function (channel) {
          window.bridge = channel.objects.bridge;
          webChannelReady = true;
          console.log("🔌 WebChannel ready");

          // ASYNC: get user location from Python
          window.bridge.getUserLocation().then((coords) => {
            if (coords && coords.lat && coords.lng) {
              userLocation = { lat: coords.lat, lng: coords.lng };
              console.log("📍 Location from Python:", userLocation);
              notifyIfFullyReady();

              if (pendingDestination) {
                const dest = pendingDestination;
                pendingDestination = null;
                console.log("🔁 Retrying deferred route to:", dest);
                createRoute(dest);
              }
            } else {
              console.warn("⚠️ getUserLocation() returned invalid data");
            }
          }).catch((err) => {
            console.error("❌ Failed to get location from Python:", err);
          });
        });

        mapReady = true;
        console.log("✅ Map object initialized");
      };

      function setTravelMode(mode) {
        if (["DRIVING", "WALKING", "BICYCLING", "TRANSIT"].includes(mode)) {
          currentTravelMode = mode;
          console.log("🚦 Travel mode set to:", mode);
        }
      }

      function createRoute(destination) {
        if (!mapReady || !userLocation) {
          console.warn("⚠️ Not ready, deferring route to:", destination);
          pendingDestination = destination;
          return;
        }

        console.log("📍 Routing from:", userLocation, "→", destination);

        const request = {
          origin: userLocation,
          destination: destination,
          travelMode: currentTravelMode
        };

        directionsService.route(request, (result, status) => {
          if (status === "OK") {
            directionsRenderer.setDirections(result);
            console.log("✅ Route displayed.");
          } else {
            console.error("❌ Route failed:", status);
          }
        });
      }
    </script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
  </body>
</html>