leaflet入門｜プラグインでダイアログを表示する（Leaflet.Dialog）

Leafletのプラグイン「Leaflet.Dialog」を使って、地図上にダイアログメッセージを表示します。

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

１．全体のコード

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

        // Dialog
        var options = {
          size: [300,200],
          minSize: [50,50],
          maxSize: [400,350],
          anchor: [75,150],
          position: 'topleft',
          initOpen: true
        }

        var contents = "<p>Dialog</p>";
        contents += "<a href='https://github.com/NBTSolutions/Leaflet.Dialog' target='_blank'>GitHub-Leaflet.Dialog</a>";

        var dialog = L.control.dialog(options)
                  .setContent(contents)
                  .addTo(map);

        // Dialogのイベントを登録
        map.on('dialog:closed', function(e){ alert('dialog close event.'); });
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin Leaflet.Dialog</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);

// Dialog

var options = {

size: [300,200],

minSize: [50,50],

maxSize: [400,350],

anchor: [75,150],

position: 'topleft',

initOpen: true

}

var contents = "<p>Dialog</p>";

contents += "<a href='https://github.com/NBTSolutions/Leaflet.Dialog' target='_blank'>GitHub-Leaflet.Dialog</a>";

var dialog = L.control.dialog(options)

.setContent(contents)

.addTo(map);

// Dialogのイベントを登録

map.on('dialog:closed', function(e){ alert('dialog close event.'); });

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Leaflet.Dialog

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

index.html
css/Leaflet.Dialog.css
js/Leaflet.Dialog.js

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

2-1で配置した css・jsファイルを読み込みます。
また、アイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

<!-- 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/Leaflet.Dialog.css" />
    <script src="js/Leaflet.Dialog.js"></script>
<!-- plugin -->

２−３．Dialogの設定（オプション）

ダイアログオブジェクトを作成する際に、オプションを指定することができます。
今回は、以下のようにオプションを設定します。

var options = {
  size: [300,200],
  minSize: [50,50],
  maxSize: [400,350],
  anchor: [75,150],
  initOpen: true
}

var options = {

size: [300,200],

minSize: [50,50],

maxSize: [400,350],

anchor: [75,150],

initOpen: true

}

オプション
size：ダイアログのサイズ。
minSize：ダイアログの最小サイズ。
maxSize：ダイアログの最大サイズ。
anchor：ダイアログの表示開始位置。
initOpen：初期状態でダイアログを表示（true）非表示（false）。

２−４．Dialogの設定（コンテンツ）

コンテンツは、htmlで作成します。
そのため、テキスト以外にリンク・ボタンなども表示することができます。

var contents = "<p>Dialog</p>";
contents += "<a href='https://github.com/NBTSolutions/Leaflet.Dialog' target='_blank'>GitHub-Leaflet.Dialog</a>";

1 2	var contents = "<p>Dialog</p>"; contents += "<a href='https://github.com/NBTSolutions/Leaflet.Dialog' target='_blank'>GitHub-Leaflet.Dialog</a>";

２−５．Dialogの設定（L.control.dialogオブジェクトの追加）

L.control.dialogオブジェクト作成時に、オプションと表示内容を指定します。

var dialog = L.control.dialog(options)
          .setContent(contents)
          .addTo(map);

var dialog = L.control.dialog(options)

.setContent(contents)

.addTo(map);

２−６．Dialogの設定（イベントの登録）

L.control.dialogでは、様々なイベントを登録することができます。
Demoでは、’dialog:closed’ イベントを登録しているため、右上のバツボタンをクリックするとダイアログが閉じられる際に、アラートメッセージが表示されます。

// Dialogのイベントを登録
map.on('dialog:closed', function(e){ alert('dialog close event.'); });

1 2	// Dialogのイベントを登録 map.on('dialog:closed', function(e){ alert('dialog close event.'); });

今回使用したオプション以外にも様々なオプションがあります。
詳細は、GitHub-Leaflet.Dialog をご参照ください。

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

その他のメッセージ・ダイアログ表示のおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン（メッセージ・ダイアログの表示）

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