Edited at

自作地図: leafletで使えるおすすめプラグインまとめ

More than 3 years have passed since last update.


leafletとは


leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。

軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。

ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね?」という方も、一度触ってみてください。

by http://shimz.me/blog/leaflet-js/4142


とのこと。今回、地図をカスタマイズして独自の地図を作ることになったので、GoogleMapではなく、 leafletを使用してみることにしました。

GoogleMapのように普通にマップを表示できる以外に、leaflet用のプラグインを使って、かなり高機能な地図をつくれます。

今回そのleafletのプラグインを調べて使えそうなものをリストアップしたので興味のある方は参考にどうぞ


プラグイン

leafletの公式サイトで紹介されているプラグイン一覧は以下のリンクにあります。

http://leafletjs.com/plugins.html

この中から個人的に有用そうなものをピックアップしました。(といっても、2,30ある。。)

多いので適当にカテゴリ分けします

* コントローラー系

* マーカー系

* パス系

* ミニマップ系

* その他


コントローラー系


Leaflet-IconLayers

demo

マップ上で地図のタイルを変更できるコントローラーを追加できるプラグイン


leaflet-search

demo

マーカーに登録したタイトルとかを検索候補つきで検索できるボックスを追加するプラグイン


Leaflet.fullscreen

クリックすると地図が全画面表示になるコントローラーを追加するプラグイン


Leaflet.Pancontrol

スマホゲームのような十字キーが設置できる。


leaflet.zoomhome

設定したホーム(緯度経度?)に戻れるホームボタンを追加するプラグイン


Leaflet.EasyButton

いろんなボタンを設置できる。かなり高機能そう。githubのstar的にもよさげ


マーカー系


leaflet-pulse-icon

demo

「今ここにいるよ!」と言わんばかりのいい感じのマーカーを簡単に設置できるプラグイン


マーカーアイコン

Leaflet.ExtraMarkers

demo

Leaflet.awesome-markers

demo

どちらも簡単に地図にマーカーアイコンを設置できるプラグイン。アイコンが可愛い。


Leaflet.Photo

demo

マップに画像が設置できるプラグイン


パス系


Leaflet.MovingMarker

描画したパス上をマーカーが移動できるプラグイン


leaflet-ant-path

描画したマップがgifのように理髪店のトリコロールのようになるプラグイン


Leaflet.Polyline.ShakeAnim

demo

セットしたパスを少しずつ描画していくプラグイン


ミニマップ系


leaflet-globeminimap

demo

地図の右下に世界地図が表示される。


Leaflet-Minimap

世界地図ではなくて、その地域よりzoomが2ぐらい小さいミニマップを表示するプラグイン。こっちの方が使い勝手ありそう。ドラクエみたいな感じ。


その他


Leaflet.EdgeMarker

現在地点から見て他のマーカーのある位置を矢印で表示してくれる。(リンクから飛べるdemoを見た方が早い)


Leaflet.Marker.Stack

demo

マップに円スタックみたいなのが置けるプラグイン


leaflet-history

地図をドラッグしたりズームしたりの操作履歴を残して、歴史をさかのぼったりできるコントローラーを追加するプラグイン


Leaflet.MapPaint

demo

マップにお絵描きができるプラグイン。よくわかんないけど、高機能


LeafletPlayback

マーカーとかの履歴を動画にするみたいなプラグイン

とりあえずdemoを見てください。百聞は一見に如かず

http://leafletplayback.theoutpost.io/examples/example_2.html


leaflet-hash

クリックした地点の緯度経度にURLが変わる。GoogleMapみたいな感じになる。


Leaflet.MeasureControl

描画したパスの距離を取得するプラグイン。

このパスだと何kmとか表示してくれる。結構重宝しそう。


leaflet-control-window

demo

地図上にモーダルを表示できる。これは使えそう。


sidebar-v2

demo

かなりいい感じのサイドバーが追加できる。


Leaflet.Bookmarks

地図にブックマーク機能を追加できる


最後に

高機能なプラグインが豊富なので、自分好みに追加したらかなり豪華な地図ができそう。個人的には、ミニマップと十字キーを見ただけで、あと、タイルとかをそれっぽいの選んだら、リアルドラクエの世界がマップ上で実現できそうで、しかも、十字キーで勇者型のマーカーを移動させれたら、リアルRPGの出来上がり。。。って妄想しただけでも楽しそうだったので、是非活用してみてください。

leafletのプラグイン全てを目に通すのはかなり疲れた。