sunapara/building_1F.html at e82ff4b7568b90536215241ac1f0bde93c986647

Fork: 0

c123176_nao / sunapara

Find file

Newer

Older

sunapara / building_1F.html

本間直樹 on 15 Jul 1 KB Add files via upload

Raw Blame History

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ビル内テナント表示マップ（1階）</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 600px;"></div>
  <script>
    const map = L.map('map').setView([38.917, 139.839], 16);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    const csvUrl = 'snackbuilding.csv';
    const buildings = {};

    Papa.parse(csvUrl, {
      download: true,
      header: true,
      complete: function(results) {
        results.data.forEach(row => {
          // 1階のみ抽出
          if (!row.building_name || !row.lat || !row.lon || row.floor !== '1F') return;
          const key = row.building_name;
          if (!buildings[key]) {
            buildings[key] = {
              lat: parseFloat(row.lat),
              lon: parseFloat(row.lon),
              tenants: []
            };
          }
          buildings[key].tenants.push({
            floor: row.floor,
            name: row.shop_name,
            category: row.category
          });
        });

        Object.entries(buildings).forEach(([name, data]) => {
          const popupHtml = `
            <b>${name}</b><br>
            ${data.tenants.map(t => `${t.floor}: ${t.name}（${t.category}）`).join('<br>')}
          `;
          L.marker([data.lat, data.lon])
            .addTo(map)
            .bindPopup(popupHtml);
        });
      }
    });
  </script>
</body>
</html>