<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酒田市観光スポットマップ</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<h1>酒田市観光スポットマップ</h1>
<div id="map"></div>
<button id="button">リストを追加</button>
<ul id="list"></ul>
<script>
const map = L.map('map').setView([38.91803, 139.82656], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
fetch('pj_b.geojson')
.then(response => response.json())
.then(data => {
const geojsonLayer = L.geoJSON(data, {
pointToLayer: function(feature, latlng) {
let iconUrl = feature.properties._umap_options.iconUrl;
let icon = L.icon({
iconUrl: 'https://umap.openstreetmap.fr' + iconUrl,
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
return L.marker(latlng, { icon: icon });
},
onEachFeature: function(feature, layer) {
layer.on('click', function() {
let clickedLatLng = layer.getLatLng();
// クリックした店名をリストに追加
let listItem = document.createElement('li');
listItem.textContent = feature.properties.name;
document.getElementById('list').appendChild(listItem);
// 500メートル以内の他の地点をリストアップ
let nearbyLocations = [];
geojsonLayer.eachLayer(function(otherLayer) {
let otherLatLng = otherLayer.getLatLng();
let distance = clickedLatLng.distanceTo(otherLatLng);
if (distance <= 500 && layer !== otherLayer) {
nearbyLocations.push(otherLayer.feature.properties.name);
}
});
// ポップアップの内容を作成
let nearbyList = nearbyLocations.length ? nearbyLocations.join('<br>') : '500メートル以内に他の場所はありません。';
let popupContent = `
<b>${feature.properties.name}</b><br>
<b>500メートル以内の場所:</b><br>${nearbyList}
`;
// ポップアップを開く
layer.bindPopup(popupContent).openPopup();
});
}
}).addTo(map);
})
.catch(error => console.error('GeoJSONデータの読み込みエラー:', error));
</script>
</body>
</html>
