leaflet入門｜プラグインで右クリックメニューを追加する（contextmenu）

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

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

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

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin contextmenu</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- plugin -->
    <link rel="stylesheet" href="css/leaflet.contextmenu.min.css" />
    <script src="js/leaflet.contextmenu.min.js"></script>
<!-- plugin -->
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
        // Mapの基本設定
        var map = L.map('mapid',{
          center: [35.7122, 139.8117],
          zoom: 15,
          minZoom: 13,
          maxZoom: 16,
          contextmenu: true,
          contextmenuWidth: 180,
        	contextmenuItems: [{
        	    text: '緯度経度を表示',
        	    callback: showLatLng
        	}, {
        	    text: 'この地点を地図の中央に指定',
        	    callback: setCenterMap
        	}]
        });

        function showLatLng (e) {
            alert(e.latlng);
        }

        function setCenterMap (e) {
            map.panTo(e.latlng);
        }

        var markerContextMenu = {
            contextmenu: true,
            contextmenuItems: [{
                text: '詳細を表示',
                index: 0,
                callback: showMarkerInfo
            }, {
                separator: true,
                index: 1
            }]
        }
        L.marker([35.7115,139.8117], markerContextMenu).addTo(map);

        function showMarkerInfo(e){
            alert(e.latlng);
        }

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      	}).addTo(map);

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin contextmenu</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

// Mapの基本設定

var map = L.map('mapid',{

center: [35.7122, 139.8117],

zoom: 15,

minZoom: 13,

maxZoom: 16,

contextmenu: true,

contextmenuWidth: 180,

contextmenuItems: [{

text: '緯度経度を表示',

callback: showLatLng

}, {

text: 'この地点を地図の中央に指定',

callback: setCenterMap

}]

});

function showLatLng (e) {

alert(e.latlng);

}

function setCenterMap (e) {

map.panTo(e.latlng);

}

var markerContextMenu = {

contextmenu: true,

contextmenuItems: [{

text: '詳細を表示',

index: 0,

callback: showMarkerInfo

}, {

separator: true,

index: 1

}]

}

L.marker([35.7115,139.8117], markerContextMenu).addTo(map);

function showMarkerInfo(e){

alert(e.latlng);

}

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(map);

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-contextmenu

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

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

２−２．プラグインの読み込み

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

<!-- plugin -->
    <link rel="stylesheet" href="css/leaflet.contextmenu.min.css" />
    <script src="js/leaflet.contextmenu.min.js"></script>
<!-- plugin -->

２−３．contextmenuの設定（マップ全体）

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

var map = L.map('mapid',{
  center: [35.7122, 139.8117],
  zoom: 15,
  minZoom: 13,
  maxZoom: 16,
  contextmenu: true,
  contextmenuWidth: 180,
  contextmenuItems: [{
      text: '緯度経度を表示',
      callback: showLatLng
  }, {
      text: 'この地点を地図の中央に指定',
      callback: setCenterMap
  }]
});

var map = L.map('mapid',{

center: [35.7122, 139.8117],

zoom: 15,

minZoom: 13,

maxZoom: 16,

contextmenu: true,

contextmenuWidth: 180,

contextmenuItems: [{

text: '緯度経度を表示',

callback: showLatLng

}, {

text: 'この地点を地図の中央に指定',

callback: setCenterMap

}]

});

contextmenu: true

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

contextmenuWidth: 180

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

contextmenuItems: [{}]

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

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

２−４．contextmenuの設定（マーカー）

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

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

var markerContextMenu = {
    contextmenu: true,
    contextmenuItems: [{
        text: '詳細を表示',
        index: 0,
        callback: showMarkerInfo
    }, {
        separator: true,
        index: 1
    }]
}
L.marker([35.7115,139.8117], markerContextMenu).addTo(map);

var markerContextMenu = {

contextmenu: true,

contextmenuItems: [{

text: '詳細を表示',

index: 0,

callback: showMarkerInfo

}, {

separator: true,

index: 1

}]

}

L.marker([35.7115,139.8117], markerContextMenu).addTo(map);

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

３．その他のおすすめプラグイン

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

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