<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>uMap旅行プランナー</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>uMap旅行プランナー</h1>
<div id="map"></div>
<div id="itinerary"></div>
<script>
const uMapUrl = 'https://umap.openstreetmap.fr/ja/map/pj_b_1155144';
const map = L.map('map').setView([38.535, 140.265], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
fetch(`${uMapUrl}/geojson/`)
.then(response => response.json())
.then(data => {
L.geoJSON(data, {
onEachFeature: (feature, layer) => {
if (feature.properties && feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
layer.on('click', (e) => {
addToItinerary(feature.properties.name);
});
}
}).addTo(map);
})
.catch(error => console.error('Error loading uMap data:', error));
function addToItinerary(placeName) {
const itinerary = document.getElementById('itinerary');
const item = document.createElement('div');
item.textContent = placeName;
itinerary.appendChild(item);
}
</script>
</body>
</html>
