contrails/testMap.html at main · pless/contrails · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WorldScope</title>
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
    #map { height: 100vh; width: 100vw; }
    .popup-img { max-width: 150px; max-height: 100px; display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const CSV_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vR_CFcEzFxbXYxz3VmavAAbDn4Mp3SYgW_OWwRbMtKhINKvW_Y-bd-n2MKeVCMMk4YkaKTmVXA0jah2/pub?gid=0&single=true&output=csv";

    function parseCSV(text) {
      const rows = text.trim().split('\n');
      const headers = rows[0].split(',');
      return rows.slice(1).map(row => {
        const values = row.split(',');
        const obj = {};
        headers.forEach((header, i) => {
          obj[header.trim()] = values[i] ? values[i].trim() : "";
        });
        return obj;
      });
    }

    function getLabelQuery() {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get('label');
    }

    window.initMap = function() {
      const label = getLabelQuery();
      if (label) {
        console.log("Filtering by label:", label);
      }
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 38.9, lng: -77.04 },
        zoom: 4,
        mapId: '2e6d1e173674445b90e0edd1'
      });

      fetch(CSV_URL)
        .then(response => response.text())
        .then(csvText => {
          const pins = parseCSV(csvText);
          console.log("Loaded rows from CSV:", pins.length);

          let markerCount = 0;
          const infoWindow = new google.maps.InfoWindow();

          pins.forEach(pin => {
            const lat = parseFloat(pin.Latitude || pin.latitude || pin.lat);
            const lng = parseFloat(pin.Longitude || pin.longitude || pin.lng || pin.lon);
            const name = pin.Name || pin.name || pin.title || "";
            const tags = pin.tags || pin.Tags || "";
            const imageUrl = pin.imageURL || pin.ImageURL || pin.image || "";

            // Filter by label if provided
            if (label && (!tags || !tags.toLowerCase().includes(label.toLowerCase()))) {
              return;
            }
            if (!isNaN(lat) && !isNaN(lng)) {
              console.log(`Adding pin: ${name} at (${lat}, ${lng})`);
              const marker = new google.maps.Marker({
                position: { lat: lat, lng: lng },
                map: map,
                title: name
              });

              let popupContent = `<div><strong>${name}</strong>`;
              if (imageUrl) {
                popupContent += `<br>
                  <a href="${imageUrl}" target="_blank">
                    <img src="${imageUrl}" class="popup-img" alt="${name}"/>
                  </a>`;
              }
              popupContent += `</div>`;

              marker.addListener('click', () => {
                infoWindow.setContent(popupContent);
                infoWindow.open(map, marker);
                console.log("click")
              });

              markerCount++;
            } else {
              console.log("Skipping invalid row:", pin);
            }
          });
          console.log("Markers actually added to map:", markerCount);
        })
        .catch(err => {
          console.error("Failed to load pins:", err);
        });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLGA1rjtMfRoIqPmpcqT8Pw_S_oCttw3g&callback=initMap" loading="async"></script>
</body>
</html>