Leaflet.jsでMapboxのタイルを用いて地図を表示する

Apr 8, 2019   : Leaflet.jsでMapboxのタイルを用いて地図を表示するよ

Leaflet.jsでMapboxのタイルを用いて地図を表示してみます:

コード

チュートリアルなどにしたがって進めてみます。

地図を表示する

チュートリアルなどに従って地図を表示してみました。国土地理院・Open Street Map・Mapboxの3つのタイルを切り替えられるようにしてみました。

地図は上野駅が中心になるように指定しています。

マーカーを設置する

以下のように指定して、マーカーを設置します:

サークルを設置する

以下のように指定して、サークルを設置します:

ポリゴンを設置する

複数の経度・緯度を指定し、その点を結んだ図形を描画します。

GeoJSONからデータを読み込んで描画する

こんな感じで描画できます:

外部のTopoJSONを読み込んで描画する

GeoJSONだけでなく、TopoJSONという形式もあるようです。ここでは外部のTopoJSONを読み込んで、描画してみます。

参考