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


## 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](https://www.npmjs.com/package/leaflet-iconlayers)

![demo](https://github.com/ScanEx/Leaflet-IconLayers/blob/master/demo.gif?raw=true)

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

#### [leaflet-search](https://github.com/stefanocudini/leaflet-search)

![demo](https://raw.githubusercontent.com/stefanocudini/leaflet-search/master/images/leaflet-search.jpg)

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

#### [Leaflet.fullscreen](https://github.com/Leaflet/Leaflet.fullscreen)

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

#### [Leaflet.Pancontrol](http://kartena.github.io/Leaflet.Pancontrol/)

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

#### [leaflet.zoomhome](https://github.com/torfsen/leaflet.zoomhome)

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

#### [Leaflet.EasyButton](https://github.com/CliffCloud/Leaflet.EasyButton)

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

### マーカー系

#### [leaflet-pulse-icon](https://github.com/mapshakers/leaflet-icon-pulse)

![demo](https://camo.githubusercontent.com/0fcaf2e87ac043acf61a75f9ddcf4b332aed38f5/687474703a2f2f6d61707368616b6572732e6769746875622e696f2f70726f6a656374732f6c6561666c65742d70756c73652d69636f6e2f6c6561666c65742d70756c73696e672d69636f6e2e676966)

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

#### マーカーアイコン
[Leaflet.ExtraMarkers](https://github.com/coryasilva/Leaflet.ExtraMarkers)
![demo](https://camo.githubusercontent.com/139673d887bedbf26e286ebfc5fb40d139f879f9/68747470733a2f2f7261772e6769746875622e636f6d2f636f72796173696c76612f4c6561666c65742e45787472614d61726b6572732f6d61737465722f73637265656e73686f742e706e67)

[Leaflet.awesome-markers](https://github.com/lvoogdt/Leaflet.awesome-markers)
![demo](https://camo.githubusercontent.com/a0281bc5c0b55f8175fd3ed18c972b320c60e254/68747470733a2f2f7261772e6769746875622e636f6d2f6c766f6f6764742f4c6561666c65742e617765736f6d652d6d61726b6572732f6d61737465722f73637265656e73686f74732f73637265656e73686f742d736f66742e706e67)

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

#### [Leaflet.Photo](https://github.com/turban/Leaflet.Photo)

![demo](http://1.bp.blogspot.com/-aGMmcbnjjjM/VAA7j-pj_6I/AAAAAAAANmI/2sVxm_q4hCE/s1600/Screen%2BShot%2B2014-08-29%2Bat%2B10.32.07.png)

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

### パス系

#### [Leaflet.MovingMarker](https://github.com/ewoken/Leaflet.MovingMarker)

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

#### [leaflet-ant-path](https://github.com/rubenspgcavalcante/leaflet-ant-path)

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

#### [Leaflet.Polyline.ShakeAnim](https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim)

![demo](https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/raw/master/demo.gif?raw=true)

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

### ミニマップ系

#### [leaflet-globeminimap](https://github.com/chriswhong/leaflet-globeminimap/)

![demo](https://cloud.githubusercontent.com/assets/1833820/10415088/cb1d45fe-6fb8-11e5-9903-2c2ec16fbabd.png)

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

#### [Leaflet-Minimap](https://github.com/Norkart/Leaflet-MiniMap)

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

### その他

#### [Leaflet.EdgeMarker](https://github.com/ubergesundheit/Leaflet.EdgeMarker)

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

#### [Leaflet.Marker.Stack](https://github.com/IvanSanchez/Leaflet.Marker.Stack)

![demo](https://camo.githubusercontent.com/39e0e278d6c5036aa12806371e8e664d20de03ef/687474703a2f2f6976616e73616e6368657a2e6769746875622e696f2f4c6561666c65742e4d61726b65722e537461636b2f63686970732e706e67)

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

#### [leaflet-history](http://cscott530.github.io/leaflet-history/)

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

#### [Leaflet.MapPaint](https://github.com/SINTEF-9012/Leaflet.MapPaint)

![demo](https://github.com/SINTEF-9012/Leaflet.MapPaint/raw/master/demo.png?raw=true)

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

#### [LeafletPlayback](https://github.com/hallahan/LeafletPlayback)

マーカーとかの履歴を動画にするみたいなプラグイン
とりあえずdemoを見てください。百聞は一見に如かず
http://leafletplayback.theoutpost.io/examples/example_2.html

#### [leaflet-hash](https://github.com/mlevans/leaflet-hash)

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

#### [Leaflet.MeasureControl](https://github.com/makinacorpus/Leaflet.MeasureControl)

描画したパスの距離を取得するプラグイン。
このパスだと何kmとか表示してくれる。結構重宝しそう。

#### [leaflet-control-window](https://github.com/mapshakers/leaflet-control-window)

![demo](https://camo.githubusercontent.com/51dc186beb2648baf94437986287461e85e8279a/687474703a2f2f6d61707368616b6572732e6769746875622e696f2f70726f6a656374732f6c6561666c65742d636f6e74726f6c2d77696e646f772f6c6561666c65742d636f6e74726f6c2d77696e646f772e6a7067)

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

#### [sidebar-v2](https://github.com/turbo87/sidebar-v2/)

![demo](https://github.com/Turbo87/sidebar-v2/raw/master/doc/leaflet-1.png?raw=true)

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

#### [Leaflet.Bookmarks](http://w8r.github.io/Leaflet.Bookmarks/)

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


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

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