LeafletとOSRMで簡単ルート表示！徒歩・自転車ナビをWebページに組み込む方法

Webサイトに徒歩や自転車のルート表示機能を追加したい──それも、無料で、柔軟にカスタマイズできる形で。
そんなときに頼りになるのが、OpenStreetMap（OSM）とLeaflet.js、そしてOSRM（Open Source Routing Machine）です。

本記事では、OSMとLeaflet、OSRMを組み合わせて「出発地から目的地までのルート」を地図上に表示する仕組みを、初心者向けに解説します。特に、自転車ナビや観光地案内サイト、キャンプ場や宿泊施設の周辺案内などに活用したい方におすすめです。

なぜOSRMを使うのか？
OSRMの基本API仕様
実用サンプル：徒歩ルートを表示する
応用：自転車ナビに切り替える
地図クリックでルート計算（応用例）
よくあるトラブルと対策
自前でOSRMサーバを立てる方法（中級者向け）
今後の拡張アイデア
まとめ

なぜOSRMを使うのか？

項目	OSRM	GraphHopper	OpenRouteService
APIキー	不要（パブリックAPIあり）	必要	必要
レスポンス速度	非常に高速	高速	やや遅め
徒歩対応	○	○	○
自転車対応	○	○	○
カスタマイズ性	高い（自前サーバ構築可）	高い	高機能だがやや複雑
日本語住所検索	×（補完必要）	×	○

OSRMは非常に軽量・高速で、APIキーなしで試せるのが最大の利点です。APIリクエスト制限もありません（ただしパブリックAPIはあくまでテスト用と位置づけられています）。

本番用途では自前でサーバを構築することで、完全に独立したナビゲーションシステムを構築できます。

OSRMの基本API仕様

OSRMのパブリックAPIは以下のようなエンドポイントを使います：

https://router.project-osrm.org/route/v1/{profile}/{lon1},{lat1};{lon2},{lat2}?overview=full&geometries=geojson

パラメータ	内容
profile	“foot”（徒歩）, “bike”（自転車）, “car”（車）など
lon, lat	経度, 緯度（順番に注意）
overview	“full”指定でルート全体を取得
geometries	“geojson”を指定してLeafletと相性の良い形式に

実用サンプル：徒歩ルートを表示する

以下は東京駅から東京タワーまでの徒歩ルートをLeafletとOSRMで描画するHTMLサンプルです：

<!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 = [35.681236, 139.767125];
    const end = [35.6586, 139.7454];

    // マーカー
    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>

応用：自転車ナビに切り替える

上記のサンプルでは foot（徒歩）を指定していますが、自転車ナビに切り替えるにはエンドポイントの一部を以下のように変更するだけです：

const url = `https://router.project-osrm.org/route/v1/bike/${start[1]},${start[0]};${end[1]},${end[0]}?overview=full&geometries=geojson`;

自転車ナビは自動車用の経路とは異なり、歩道やサイクリングロードを考慮したルートを表示してくれます。

地図クリックでルート計算（応用例）

Leafletの map.on('click', ...) を使えば、ユーザーが地図上をクリックしてルートの出発地・目的地を選べるインタラクティブなUIも作れます。サンプルコードが必要な場合はお知らせください。

よくあるトラブルと対策

症状	対策
ルートが表示されない	経緯度の順番を `経度, 緯度` にしているか確認
CORSエラー	OSRMの自前サーバを立てるか、プロキシ経由で回避
ルートが回り道すぎる	徒歩・自転車・車などprofileを使い分ける
日本語の住所で指定できない	Nominatim等のジオコーディングAPIを併用

自前でOSRMサーバを立てる方法（中級者向け）

より信頼性の高い運用や独自ルート定義を行いたい場合は、OSRMサーバを自前で構築することも可能です。Dockerでの立ち上げが一般的です：

docker run -t -i -p 5000:5000 osrm/osrm-backend osrm-routed --algorithm mld /data/japan-latest.osrm

日本用の .osm.pbf ファイルは Geofabrik から取得できます。

今後の拡張アイデア

機能	実現方法
現在地から出発	HTML5 Geolocation APIで緯度経度取得
経由地ルート	OSRMの複数地点対応で中間点追加
高低差情報	標高APIと連携
時間制約	OSRMは時刻未対応 → 他APIの併用検討