<!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 => {
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) {
let popupContent = `<b>${feature.properties.name}</b><br>${feature.properties.description}`;
layer.bindPopup(popupContent);
layer.on('click', function() {
let listItem = document.createElement('li');
listItem.textContent = feature.properties.name;
document.getElementById('list').appendChild(listItem);
});
}
}).addTo(map);
})
.catch(error => console.error('GeoJSONデータの読み込みエラー:', error));
</script>
</body>
</html>
