Leaflet入門｜おすすめプラグイン（イベント処理のカスタマイズ）

Leafletのプラグインで提供されている、イベント処理をカスタマイズするプラグインをまとめました。

それぞれのプラグインのDemoと実装方法を記載しています。

１．プラグイン一覧

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

２．各プラグインの詳細

２−１．Leaflet.OverIntent

Leafletのプラグイン「Leaflet.OverIntent」を使うと、mouseintentイベントを使うことができます。

mouseintentイベントでは、例えばマーカー上に「◯ミリ秒以上カーソルがあたっている場合に、イベントを通知」と設定することができます。

そのため、マーカーが多い地図の場合、移動する都度ポップアップが「出たり・消えたり」という動作を防ぐことができます。

Demoでは、マーカーにカーソルを当てると、ポップアップメッセージが表示されるようにしています。
比較として、以下のように設定しています。
・左側の縦に並んでいるマーカーには、mouseover イベントを設定。
・右側の縦に並んでいるマーカーには、mouseintent イベントを設定。
それぞれ、マーカーを早く縦になぞると違いが分かりやすいです。

Demoを表示

詳細な使用方法については、こちら に記載しています。

２−２．Leaflet.singleclick

シングルクリックに任意の処理を定義します。
例えば、地図全体とマーカーでシングルクリックされた際の処理を別々に定義することができます。
Demoでは以下のように実装しています。

＜地図全体＞
任意の地点をクリックすると、ポップアップメッセージが表示されます。

＜マーカー＞
アラートメッセージが表示されます。

Demoを表示

詳細な使用方法については、こちら に記載しています。

２−３．Leaflet.VisualClick

クリック・タップした場所から波紋をだし、視覚的にどこをクリック・タップしたか分かりやすくします。

Demoを表示

詳細な使用方法については、こちら に記載しています。