<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet + OSRM 徒歩ルート表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>#map { height: 500px; }</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([35.6764, 139.6993], 13); // 渋谷近辺
// OpenStreetMapレイヤー
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 出発地と目的地（東京駅 → 東京タワー）
const start = [38.90239074350774, 139.820164066126];
const end = [38.891866234086834, 139.85263266114418];
// マーカー
L.marker(start).addTo(map).bindPopup("出発地").openPopup();
L.marker(end).addTo(map).bindPopup("目的地");
// OSRM APIエンドポイント
const url = `https://router.project-osrm.org/route/v1/foot/${start[1]},${start[0]};${end[1]},${end[0]}?overview=full&geometries=geojson`;
fetch(url)
.then(res => res.json())
.then(data => {
const route = data.routes[0].geometry;
L.geoJSON(route, {
style: {
color: 'blue',
weight: 5
}
}).addTo(map);
map.fitBounds(L.geoJSON(route).getBounds());
});
</script>
</body>
</html>
