<!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>
<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 nearestLocation = null;
let nearestDistance = Infinity;
geojsonLayer.eachLayer(function(otherLayer) {
if (layer !== otherLayer) {
let otherLatLng = otherLayer.getLatLng();
let distance = clickedLatLng.distanceTo(otherLatLng);
if (distance < nearestDistance) {
nearestDistance = distance;
nearestLocation = otherLayer.feature.properties.name;
}
}
});
// ポップアップの内容を作成
let nearestLocationInfo = nearestLocation ? `一番近い場所: ${nearestLocation}` : '他の場所が見つかりませんでした。';
let popupContent = `
<b>${feature.properties.name}</b><br>
${nearestLocationInfo}<br>
<button onclick="toggleListItem('${feature.properties.name}')">リストに追加/削除</button>
`;
// 新しいポップアップを生成して開く
let popup = L.popup()
.setLatLng(clickedLatLng)
.setContent(popupContent)
.openOn(map);
});
}
}).addTo(map);
})
.catch(error => console.error('GeoJSONデータの読み込みエラー:', error));
function toggleListItem(name) {
let list = document.getElementById('list');
let existingItem = Array.from(list.children).find(item => item.textContent === name);
if (existingItem) {
list.removeChild(existingItem);
} else {
let listItem = document.createElement('li');
listItem.textContent = name;
list.appendChild(listItem);
}
}
</script>
</body>
</html>
