<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ビル内テナント表示マップ（階数絞り込み）</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>
<h2>階数で絞り込み</h2>
<select id="floorSelect">
<option value="all">すべて表示</option>
<option value="1F">1F</option>
<option value="2F">2F</option>
<option value="3F">3F</option>
</select>
<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';
let allData = []; // CSV全体のデータ
let markers = []; // 現在表示中のマーカー
// マーカーを削除する関数
function clearMarkers() {
markers.forEach(marker => map.removeLayer(marker));
markers = [];
}
// 指定された階数でマーカーを表示
function updateMarkers(floorFilter) {
clearMarkers();
const buildings = {};
allData.forEach(row => {
if (!row.building_name || !row.lat || !row.lon) return;
// フィルター適用
if (floorFilter !== 'all' && row.floor !== floorFilter) 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>')}
`;
const marker = L.marker([data.lat, data.lon])
.addTo(map)
.bindPopup(popupHtml);
markers.push(marker);
});
}
// CSV読み込み
Papa.parse(csvUrl, {
download: true,
header: true,
complete: function(results) {
allData = results.data;
updateMarkers('all'); // 初期表示：すべて
}
});
// セレクトボックス変更時にマーカー更新
document.getElementById('floorSelect').addEventListener('change', function() {
updateMarkers(this.value);
});
</script>
</body>
</html>
