Leaflet入門|おすすめプラグイン(42選)

Leafletのプラグインをまとめました。
Markerのカスタマイズや検索機能の追加など、全部で42のプラグインについて、Demoや実装方法を記載しています。

1.マーカーのカスタマイズ

マーカーのアイコンの変更など、カスタマイズを行うプラグインをまとめました。

1−1.プラグイン一覧

マーカーのアイコンを変更
・Leaflet.Icon.Glyph
・Leaflet.BeautifyMarkers
・Leaflet.Extra-Markers
・Leaflet.Awesome-Markers
・Leaflet.VectorMarkers
・leaflet-mapkey-icon
マーカーの色を変更
・leaflet.sprite
現在地マーカー
・leaflet-usermarker
・leaflet-icon-pulse
その他の効果(アニメーションなど)
・leaflet.marker.highlight
・Leaflet.BounceMarker

1−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(マーカーのカスタマイズ)

2.メニュー表示

スライドメニューや右クリックメニューなどを追加するプラグインをまとめました。

2−1.プラグイン一覧

・Leaflet.SlideMenu(スライドメニュー)
・Leaflet.contextmenu(右クリックメニュー)
・sidebar-v2(常時表示メニュー)
・Leaflet.toolbar(ツールバー)
・leaflet-custom-searchbox(スライドメニュー、検索機能)

2−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(メニュー表示)

3.検索機能の追加

マーカーの検索機能を追加するプラグインをまとめました。

3−1.プラグイン一覧

・leaflet-fusesearch(検索機能のみ)
・Leaflet Search(検索機能のみ)
・leaflet-custom-searchbox(検索機能とスライドメニュー)

3−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(検索機能の追加)

4.位置情報の利用

スマホやPCの位置情報を利用するプラグインについてまとめました。

4−1.プラグイン一覧

・Leaflet.Locate(現在地にマーカーを表示)
・Leaflet Control Compass(コンパスの表示)
・L.LocationShare(位置情報の共有)

4−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(位置情報の利用)

5.ズーム処理のカスタマイズ

地図のズーム処理をカスタマイズするプラグインをまとめました。

5−1.プラグイン一覧

矩形選択した場所を拡大する
・Leaflet.BoxZoom
・L.Control.ZoomBar
ズームレベルを制限する
・Leaflet LimitZoom
地図上にズームレベルを表示する
・Leaflet.zoominfo
・Leaflet.ZoomLabel
ズームレベルをスライダーで変更する
・Leaflet.zoomslider
ズームレベルを最小表示にする
・leaflet-zoom-min

5−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(ズーム系)

6.緯度経度の表示

地図の座標(緯度経度)を地図上に表示するプラグインをまとめました。

6−1.プラグイン一覧

マウスカーソル地点の緯度経度を表示
・Leaflet.MousePosition
・Leaflet.Coordinates
・Leaflet.NACCoordinates(NAC Address)
・Leaflet.mouseCoordinates
地図中心地点の緯度経度を表示
・Leaflet.MapCenterCoord
クリックした地点の緯度経度を表示
・Leaflet-Coordinates-Control

6−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(緯度経度の表示)

7.フルスクリーン表示

地図をフルスクリーン表示するプラグインをまとめました。

7−1.プラグイン一覧

・leaflet.fullscreen(モダンブラウザ向け)
・leaflet.zoomfs

7−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(フルスクリーン表示)

8.イベント処理のカスタマイズ

イベント処理をカスタマイズするプラグインをまとめました。

8−1.プラグイン一覧

・Leaflet.OverIntent(マウスオーバーイベントのカスタマイズ)
・Leaflet.singleclick(シングルクリックに任意の処理を定義)
・Leaflet.VisualClick(クリックした場所を分かりやすく表示)

8−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(イベント処理のカスタマイズ)

9.メッセージ・ダイアログの表示

地図に、メッセージ・ダイアログを表示するプラグインをまとめました。

9−1.プラグイン一覧

・Leaflet.Dialog(メッセージの表示)
・leaflet-control-window(メッセージの表示)
・Leaflet.Messagebox(メッセージの表示・自動で消える)

9−2.Demo・実装方法

こちらのページに記載しています。

Leaflet入門|おすすめプラグイン(メッセージ・ダイアログの表示)

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする