Leafletの使い方について、入門編と便利なプラグインについて紹介しています。

入門編

1. 地図を表示する
2. 地図に多角形を描画する
3. 地図に円を描画する
4. 地図にマーカーを表示する
5. 地図に現在地を表示する1
6. 地図に現在地を表示する2
7. 現在地アイコンを
Google Map風に変える
8.マーカーに検索機能を
追加する
9. 地図をフルスクリーンで
表示する
10. 地図にボタンを追加する

おすすめプラグイン一覧

マーカーのカスタマイズ

マーカーのカスタマイズ(11)

アイコンを変更

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

検索機能の追加

検索機能の追加(3)

leaflet-fusesearch
Leaflet Search
leaflet-custom-searchbox

メニュー表示

メニュー表示(5)

Leaflet.SlideMenu
Leaflet.contextmenu
sidebar-v2
Leaflet.toolbar
leaflet-custom-searchbox

位置情報の利用

位置情報の利用(3)

Leaflet.Locate
Leaflet Control Compass
L.LocationShare

ズーム表示のカスタマイズ

ズーム表示のカスタマイズ(7)

矩形選択した場所を拡大

L.Control.BoxZoom
L.Control.ZoomBar

ズームレベルを制限

Leaflet.LimitZoom

地図上にズームレベルを表示

Leaflet.zoominfo
Leaflet.ZoomLabel

ズームレベルをスライダーで変更

Leaflet.zoomslider

ズームレベルを最小表示に変更

leaflet-zoom-min

緯度経度の表示

緯度経度の表示(6)

マウスカーソル地点の緯度経度を表示

Leaflet.MousePosition
Leaflet.Coordinates
Leaflet.NACCoordinates
Leaflet.mouseCoordinates

地図中心地点の緯度経度を表示

Leaflet.MapCenterCoord

クリックした地点の緯度経度を表示

Leaflet-Coordinates-Control

フルスクリーン表示

フルスクリーン表示(2)

leaflet.fullscreen
leaflet.zoomfs

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

イベント処理のカスタマイズ(3)

Leaflet.OverIntent
Leaflet.singleclick
Leaflet.VisualClick

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

メッセージ・ダイアログの表示(3)

メッセージの表示(×ボタンでメッセージを消す)

Leaflet.Dialog
leaflet-control-window

メッセージの表示(自動的にメッセージが消える)

Leaflet.Messagebox

Leaflet入門 | Leafletの使い方の記事一覧一覧

NO IMAGE

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

Leafletのプラグインで提供されている、メニューを表示するプラグインをまとめました。 メニューは、スライドメニュー、常時メニュー、右クリックメニュー、ツールバーがあります。 この記事では、それぞれのDemoと実装方法を記載しています。