Leaflet入門|プラグインで右クリックメニューを追加する(contextmenu)

Leafletのプラグイン「contextmenu」を使用すると、地図に右クリックメニューを追加することができます。

実装すると以下のようになります。

地図の上と、マーカーの上で右クリックした場合、表示するメニューを変更することができます。

Demoを表示

1.全体のコード

2.解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

2−1.ファイルの配置

contextmenuの本体は GitHubからダウンロードできます。

GitHub-contextmenu

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/leaflet.contextmenu.min.css
js/leaflet.contextmenu.min.js

2−2.プラグインの読み込み

2-1で配置した css・jsファイルを読み込みます。

2−3.contextmenuの設定(マップ全体)

L.mapオブジェクト作成時に、contextmenu の設定を行います。

contextmenu: true

コンテキストメニューを表示します。

contextmenuWidth: 180

コンテキストメニューの幅を設定します。

contextmenuItems: [{}]

コンテキストメニューに表示するアイテムを設定します。

各アイテムには、コールバック関数を指定することができます。例えば、メニューをクリックした際に、実行したい処理を定義することができます。

2−4.contextmenuの設定(マーカー)

マーカーを右クリックした際に表示する、コンテキストメニューを設定します。

マーカーオブジェクト作成時に、引数でオプションを設定します。

これで、contextmenuを使用することができます。

3.その他のおすすめプラグイン

その他のメニュー系のおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(メニュー表示)

すべてのおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン 

スポンサーリンク

シェアする

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

フォローする