leaflet入門｜シングルクリックイベントを実装する（singleclick）

Leafletのプラグイン「Leaflet.singleclick」を使って、シングルクリック時に任意の処理を行います。

今回は、地図全体とマーカーにそれぞれシングルクリックイベントを実装しました。
実行する処理は自由に定義できます。

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

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

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin singleclick</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 -->
    <script src="js/singleclick.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
        });

        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);

        // singleclick（mapに設定）
        map.options.singleClickTimeout = 250;
        map.on('singleclick',function ( e ) {
        	L.popup().setLatLng( e.latlng )
        		.setContent( '<p>singleclick</p>' + e.latlng )
        		.openOn( map );
        } );

        // singleclick（markerに設定）
        marker = L.marker([35.7122, 139.8117]).addTo(map);
        marker.options.singleClickTimeout = 250;
        marker.on('singleclick', function(e){ alert('marker single click.') } );

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin singleclick</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

});

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

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

}).addTo(map);

// singleclick（mapに設定）

map.options.singleClickTimeout = 250;

map.on('singleclick',function ( e ) {

L.popup().setLatLng( e.latlng )

.setContent( '<p>singleclick</p>' + e.latlng )

.openOn( map );

} );

// singleclick（markerに設定）

marker = L.marker([35.7122, 139.8117]).addTo(map);

marker.options.singleClickTimeout = 250;

marker.on('singleclick', function(e){ alert('marker single click.') } );

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Leaflet.singleclick

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

index.html
js/singleclick.js

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

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

<!-- plugin -->
    <script src="js/singleclick.js"></script>
<!-- plugin -->

２−３．singleclickの設定

シングルクリックは、L.mapやL.markerオブジェクトのイベントとして設定します。
また、オプション「options.singleClickTimeout」で、ダブルクリックと判定する時間（ミリ秒）を設定できます。デフォルトは、500ミリ秒です。

// singleclick（mapに設定）
map.options.singleClickTimeout = 250;
map.on('singleclick',function ( e ) {
  L.popup().setLatLng( e.latlng )
    .setContent( '<p>singleclick</p>' + e.latlng )
    .openOn( map );
} );

// singleclick（markerに設定）
marker = L.marker([35.7122, 139.8117]).addTo(map);
marker.options.singleClickTimeout = 250;
marker.on('singleclick', function(e){ alert('marker single click.') } );

// singleclick（mapに設定）

map.options.singleClickTimeout = 250;

map.on('singleclick',function ( e ) {

L.popup().setLatLng( e.latlng )

.setContent( '<p>singleclick</p>' + e.latlng )

.openOn( map );

} );

// singleclick（markerに設定）

marker = L.marker([35.7122, 139.8117]).addTo(map);

marker.options.singleClickTimeout = 250;

marker.on('singleclick', function(e){ alert('marker single click.') } );

それぞれ、以下のようにオブジェクトにイベントを設定しています。

＜L.mapオブジェクト＞

map.on('singleclick',function (e){});

1	map.on('singleclick',function (e){});

＜L.markeオブジェクト＞

marker.on('singleclick', function(e){ } );

1	marker.on('singleclick', function(e){ } );

これで、Leaflet.singleclick でシングルクリックイベントを実装できました。

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

その他のイベント処理をカスタマイズするおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン（イベント処理のカスタマイズ）

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