interactive-map/mapa.html at main · kubsta/interactive-map · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mapa Gier</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    // Initialize the map
    var map = L.map('map').setView([49.832044, 18.2879161], 13);

    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // Fetch data from published Google Sheet
    const sheetURL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTMQrGTiqRDWXZP8_LhKqa05-vYb29AgG-sucQB5wldJ9CcbNuQOmdi2tjWM2V2K4iSVrOxepQ_Nkgp/pub?output=csv';

    fetch(sheetURL)
      .then(response => response.text())
      .then(csvText => {
        const rows = csvText.split('\n').slice(1); // skip header row
        rows.forEach(row => {
          const columns = row.split(',');
          const name = columns[0];
          const lat = parseFloat(columns[1]);
          const lng = parseFloat(columns[2]);
          const symbol = columns[3] || '🎲';
          const startTime = columns[4];
          const NumPeople = columns [5];

          if (!isNaN(lat) && !isNaN(lng)) {
            const icon = L.divIcon({
              html: `<div style="font-size: 2rem;">${symbol}</div>`,
              className: ''
            });

            L.marker([lat, lng], { icon: icon })
              .addTo(map)
              .bindPopup(`<b>${name}</b><br>Rozpoczyna w ${startTime}<br> Liczba graczy ${NumPeople}`);
          }
        });
      })
      .catch(err => console.error('Error loading sheet data', err));
  </script>
</body>
</html>