<!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%; }
#info { margin-top: 20px; }
</style>
</head>
<body>
<h1>uMap地点情報表示</h1>
<div id="map"></div>
<div id="info"></div>
<script>
// uMapのGeoJSONデータURL
const uMapGeoJsonUrl = 'https://umap.openstreetmap.fr/ja/map/pj_b_1155144/geojson/';
// 地図の初期化
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);
// GeoJSONデータを取得して地図に表示
fetch(uMapGeoJsonUrl)
.then(response => response.json())
.then(data => {
L.geoJSON(data, {
onEachFeature: (feature, layer) => {
// ポップアップに地点情報を表示
let popupContent = '<strong>地点情報:</strong><br>';
for (let key in feature.properties) {
if (key !== '_umap_options') {
popupContent += `<strong>${key}:</strong> ${feature.properties[key]}<br>`;
}
}
layer.bindPopup(popupContent);
// 地点クリック時に詳細情報を下部に表示
layer.on('click', () => {
showInfo(feature.properties);
});
}
}).addTo(map);
})
.catch(error => console.error('uMapデータの読み込みエラー:', error));
// 詳細情報を画面下部に表示
function showInfo(properties) {
const infoDiv = document.getElementById('info');
let infoContent = '<h2>選択した地点の詳細情報</h2>';
for (let key in properties) {
if (key !== '_umap_options') {
infoContent += `<p><strong>${key}:</strong> ${properties[key]}</p>`;
}
}
infoDiv.innerHTML = infoContent;
}
</script>
</body>
</html>
