Leaflet入門１０｜地図にボタンを追加する

今回はプラグイン「Leaflet.EasyButton」使用して、地図にボタンを追加します。

このボタンをクリックすると、ポップアップメニューが表示されます。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Demo10</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="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel='stylesheet' href='css/easy-button.css'/>
    <script src='js/easy-button.js'></script>
<!-- plugin -->

    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
      var map = L.map('mapid').setView([35.7102, 139.8132], 15);

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

      var popup = L.popup().setContent('ポップアップメッセージ');
      L.easyButton('fas fa-comment-alt', function(btn, easyMap){
        popup.setLatLng(easyMap.getCenter()).openOn(easyMap);
      }).addTo(map);

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Demo10</title>

<!--

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

-->

</style>

</head>

<body>

var map = L.map('mapid').setView([35.7102, 139.8132], 15);

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

maxZoom: 18,

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

}).addTo(map);

var popup = L.popup().setContent('ポップアップメッセージ');

L.easyButton('fas fa-comment-alt', function(btn, easyMap){

popup.setLatLng(easyMap.getCenter()).openOn(easyMap);

}).addTo(map);

</script>

</body>

</html>

２．解説

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

２−１．プラグインのバージョン

Leafletのバージョンと、EasyButtonプラグインの対応は以下となります。

・EasyButton version 2.x.x、Leaflet 1.x.x or higher
・EasyButton version 1.3.x Leaflet 0.7.x

※最新の対応情報は、GitHub-Leaflet.EasyButton でご確認ください。

今回は、Leaflet（1.3.1）、EasyButton（2.3.0）を使用しています。

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

Leaflet.EasyButtonプラグインを使用するため、css・jsファイルを読み込みます。

<link rel='stylesheet' href='css/easy-button.css'/>
<script src='js/easy-button.js'></script>

1 2	<link rel='stylesheet' href='css/easy-button.css'/> <script src='js/easy-button.js'></script>

css・jsファイルは、GitHubからダウンロードして使用します。

GitHub-Leaflet.EasyButton

また、必須ではありませんが、ボタンに表示するアイコンは「Font Awesome」も使用できます。

今回はCDNから読み込んでいます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

２−３．ボタンの追加・アクションの設定

以下の設定だけで、ボタンとボタンが押された時のアクションを定義できます。

// popupメッセージの定義
var popup = L.popup().setContent('ポップアップメッセージ'); 
// ボタンの追加・アクションの定義
L.easyButton('fas fa-comment-alt', function(btn, easyMap){
  popup.setLatLng(easyMap.getCenter()).openOn(easyMap); 
}).addTo(map);

// popupメッセージの定義

var popup = L.popup().setContent('ポップアップメッセージ');

// ボタンの追加・アクションの定義

L.easyButton('fas fa-comment-alt', function(btn, easyMap){

popup.setLatLng(easyMap.getCenter()).openOn(easyMap);

}).addTo(map);

L.easyButton でボタンとアクションを定義します。

以下では、ボタンに表示するアイコン（ Font Awesome の fas fa-comment-alt）を指定しています。

L.easyButton('fas fa-comment-alt', function(btn, easyMap){

1	L.easyButton('fas fa-comment-alt', function(btn, easyMap){

また、ボタンが押された時のアクションは以下のように定義します。

今回は、地図の真ん中にポップアップメッセージを表示するようにしました。

popup.setLatLng(easyMap.getCenter()).openOn(easyMap);

1	popup.setLatLng(easyMap.getCenter()).openOn(easyMap);

３．その他のDemo

先ほどのDemoでは、ボタンクリック時にポップアップを表示しましたが、色々なことができます。

３−１．座標切り替え

先ほどの、「step2（ボタンの追加・アクションの設定）」の箇所を以下のようにすると、地図に表示する座標を切り替えることができます。

L.easyButton('fas fa-plane', function(btn, easyMap){
  var hanedaAirport = [35.5494, 139.7798]; // ボタンクリックでの移動先の緯度経度を指定
  easyMap.setView(hanedaAirport);
}).addTo(map);

L.easyButton('fas fa-plane', function(btn, easyMap){

var hanedaAirport = [35.5494, 139.7798]; // ボタンクリックでの移動先の緯度経度を指定

easyMap.setView(hanedaAirport);

}).addTo(map);

Demoはこちらです。

ボタンをクリックすると、座標が羽田空港に切り替わります。

３−２．１つのボタンに複数のアクションを定義する

「複数のアクション」とは、１つのボタンの状態により、実行する処理を分けるという感じです。

例えば、１つのボタンで　現在地（固定） / 羽田空港の座標の切り替えを行います。

L.easyButton({
    states: [{
            stateName: 'zoom-to-haneda',        // 状態のIDのようなもの
            icon:      'fas fa-plane',          // 使用するアイコン
            title:     '羽田空港',               // マウスオーバー時にツールチップに表示される名前
            onClick: function(btn, map) {
                map.setView([35.5494, 139.7798],15);
                btn.state('zoom-to-current-location');    // ボタンクリック後の状態を指定
            }
        }, {
            stateName: 'zoom-to-current-location',
            icon:      'fas fa-map-marker-alt',
            title:     '現在地',
            onClick: function(btn, map) {
                map.setView([35.7102, 139.8132],15);
                btn.state('zoom-to-haneda');
            }
    }]
}).addTo( map );

L.easyButton({

states: [{

stateName: 'zoom-to-haneda', // 状態のIDのようなもの

icon: 'fas fa-plane', // 使用するアイコン

title: '羽田空港', // マウスオーバー時にツールチップに表示される名前

onClick: function(btn, map) {

map.setView([35.5494, 139.7798],15);

btn.state('zoom-to-current-location'); // ボタンクリック後の状態を指定

}

}, {

stateName: 'zoom-to-current-location',

icon: 'fas fa-map-marker-alt',

title: '現在地',

onClick: function(btn, map) {

map.setView([35.7102, 139.8132],15);

btn.state('zoom-to-haneda');

}

}]

}).addTo( map );

Demoはこちらです。

３−３．画像ファイルをボタンのアイコンに指定する

以下のようにすると、画像ファイルをアイコンに指定することができます。

L.easyButton('<img src="画像ファイルへのパス">', function(btn, easyMap){

1	L.easyButton('<img src="画像ファイルへのパス">', function(btn, easyMap){

「Leaflet.EasyButton」を使用すると、簡単にボタンを追加することができました。

ぜひ、お試しください。