Mapbox の Isochrone API を使用してみた。

はじめに

今回は Mapbox が提供する API として、Isochrone API を使用したので、Isochrone API の紹介と Isochrone API を使用した簡単な Web アプリを Mapbox GL JS を使用して開発したので、それについても紹介していきたいと思います。

基本的な内容は以下の「Get started with the Isochrone API」を参考としています。 docs.mapbox.com

作成したサンプルアプリは以下になります。

作成したアプリは、GitHub にも公開しています。

Isochrone API とは

Isochrone API は、ある場所から指定された時間内に到達可能な領域を計算し、計算した到達可能な領域は、ポリゴンや等高線として地図上に表示できる形式でデータを返します。

docs.mapbox.com

Isochrone API の使用方法

Isochrone API のリクエストには、次の 3 つのパラメータが必要になります。

profile：The Mapbox routing profile that the query should use. ある場所から到達可能な領域として、徒歩や自転車、車などの移動を考慮した指定ができます。歩行者やハイキングの移動時間であれば徒歩、自転車での移動時間であれば自転車、車での移動時間であれば車での移動とすることができます。
coordinates： isochrone の中心とした座標 (経度、緯度)。ここで指定した場所を中心に到達可能な領域を作成します。
contours_minutes：旅行の所要時間を分単位で表すことができる時間。これは、最大 4 回までのカンマ区切りのリストにすることができます。最大所要時間は60分です。

https://api.mapbox.com/isochrone/v1/mapbox/{profile}/{coordinates}.json?{contours_minutes}&access_token=YOUR_MAPBOX_ACCESS_TOKEN

Isochrone API は、クエリのカスタマイズに使用できるいくつかのオプションのパラメーターもあります。

polygons：ポリゴンとして返すかどうかを指定できます。このパラメータは、contours を GeoJSON polygons または linestrings として返すかどうかを指定します。polygons = true の場合、リングを形成する contours はすべてポリゴンとして返却します。

Isochrone API とその他のオプションのパラメーターの詳細については、Isochrone API のドキュメントを参照してください。

このクエリ例では、driving routing の profile を使用し、contours_minutes の値が 15 で、polygons パラメータが true に設定されています。

https://api.mapbox.com/isochrone/v1/mapbox/driving/-117.17282,32.71204?contours_minutes=15&polygons=true&access_token=pk.eyJ1IjoidmFsdWVjcmVhdGlvbiIsImEiOiJjanM0Z21xamQwNHRrM3lueXZrOHBxZmNmIn0.oF6cKsx1z4NzUNiJ7RTXNQ

このクエリに対する JSON のレスポンスを見るには、ブラウザの URL に貼り付けることで確認できます。レスポンスの geometry オブジェクトには、isochrone の輪郭を表す座標の配列が含まれています。レスポンスには、塗りつぶしの色や塗りつぶしの透過度など、isochrone をどのように描くべきかを記述したフィーチャオブジェクトも含まれています。アプリなどで使用する場合は、Isochrone API によって返された情報を使用して、isochrone の輪郭をアプリのマップに描画し、スタイルを設定したりします。

Web アプリでの利用

アプリでは、マーカーを中心に到達可能な領域を表現しています。また、マーカーはマウスなどで自由に移動ができるようにしており、到達可能な領域をマーカーの移動に合わせて確認することができます。その他、トラベルモードとして、徒歩、自転車、車の選択、所要時間の選択として、10 分、20 分、30 分が選択できるように UI を作成しました。

f:id:freedom0625:20200927231224p:plain

Isochrone API の利用は、指定したパラメータの URL を JavaScript の fetch API を利用してリクエストを投げています。リクエストの結果を表示するために、iso という名前で空のフィーチャコレクションのレイヤーを作成しています。そのレイヤーに対して、SetData メソッドを利用して、GeoJSON で返却されたデータをそのまま指定することで地図上に表示しています。

// Get a single isochrone for a given position and return the GeoJSON
const getIso = function(position) {
    // Build the URL for the isochrone API
    const isoUrl = isoAppData.params.urlBase + isoAppData.params.profile + "/" + position.join(",") + "?contours_minutes=" +
        isoAppData.params.minutes + "&polygons=true&access_token=" + mapboxgl.accessToken;

    // Return the GeoJSON
    fetch(isoUrl)
        .then(res => res.json()
    )
    .then(data => {
        console.log('Success:', data);
　　　　  // GeoJSON の結果をそのまま指定
        map.getSource('iso').setData(data);
    })
};

Mapbox GL JS によるマーカーの定義や到達可能な領域を表現するためのレイヤー定義 (isoLayer) は以下になります。

map.on('load', function() {
    // When the map loads, add the source and layer
    map.addSource('iso', {
        type: 'geojson',
        data: {
          "type": 'FeatureCollection',
          "features": []
        }
    });

    map.addLayer({
        'id': 'isoLayer',
        'type': 'fill',
        // Use "iso" as the data source for this layer
        'source': 'iso',
        'layout': {},
        'paint': {
        // The fill color for the layer is set to a light purple
        'fill-color': '#5a3fc0',
        'fill-opacity': 0.3
        }
    }, "poi-label");

    // Make the API call
    getIso(isoAppData.origins.a);

});

// Initialize the marker at the query coordinates
// marker.setLngLat(lngLat).addTo(map);
const originA = new mapboxgl.Marker({
    draggable: true
})
    .setLngLat(isoAppData.origins.a)
    .addTo(map);