<!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: '&copy; 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>
