100
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

自作地図: 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

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のプラグイン全てを目に通すのはかなり疲れた。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
100
Help us understand the problem. What are the problem?