mapbox で GeoJson からレイヤーを追加してみる

突然ですが、社内で Mapbox がアツいので何か書こうと思います。

とりあえず Web で地図を作るとするなら、動的な情報が表示できるものでないと、

極論、「じゃあ画像でも貼っとけばいいじゃん！」という話なので、

動きのあるデータを地図上に表示する準備として、まずは レイヤーに格納する情報を動的に取得できるようにしてみようと思います。

（とはいえ、今回は 鎌倉なびマップ の静的なデータを利用したため、動的に更新される事はないのですが）

それではやっていきましょう。

Mapbox では、レイヤーに関わる情報を Source と Layer に分けて保持します。

map.addSource で GeoJSON からデータを Mapbox で扱えるように取得します。

次に、 map.addLayer します。この時、追加した source の ID をLayer の source に指定してあげる事で、

レイヤーが利用可能になります。

【GeoJSON】の部分は、直接 GeoJSON の中身を記述するなり、 REST API を作成またはオープンデータから取得するようにするなどします。

const data = 【GeoJSON】
map.addSource('kamakura_shrine', {
    type: 'geojson',
    data: data
});

map.addLayer({
    'id': 'kamakura_shrine',
    'type': 'symbol',
    'source': 'kamakura_shrine',
    // （本当はこのあたりでスタイルの設定を記述したかった）
});

あとは、以下のような感じでレイヤーの中の Feature が持っている座標を転々とするように
map.panTo() で飛ぶようにしてあげると、動いている風な 地図っぽくなります。

ちょっと満足。

let idx = 0;
const intervalId = setInterval(() => {
    const features = map.getSource('kamakura_shrine')._data.features;
    map.panTo(features[idx].geometry.coordinates);
    if (features.length - 1 === idx) clearInterval(intervalId);
    idx++;
}, 2 * 1000);

以上でした。

ちなみに今回は鎌倉付近にある神社の位置を転々とするというなんとも誰得な地図になりました。