leaflet入門｜プラグインでスライドメニューを表示する（SlideMenu）

Leafletのプラグイン「SlideMenu」を使用して、地図にメニューを表示します。

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

このボタンをクリックすると、スライドメニューが表示されます。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin Leaflet.SlideMenu</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/L.Control.SlideMenu.css" />
    <script src="js/L.Control.SlideMenu.js"></script>
<!-- plugin -->
    <style type="text/css">
    <!--
        body{ margin-left: 0; }
        #mapid { height: 400px; width: 600px}

        .leaflet-menu {
          background-color: #fafafa;
        }
        .cstm-slidmenu-header {
          margin: 0;
          background-color: #5cc8ea;
          color: #fff;
          padding: 5px;
        }

        .cstm-slidmenu-content {
          padding: 0;
          margin: 0;
        }

        .cstm-slidmenu-content li {
          list-style-type: none;
          font-size: 18px;
          padding: 5px;
          border-bottom: 1px solid #ccc;
        }

        i {
          padding-left:5px;
        }

    -->
    </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,
          messagebox: true
        });

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

        // Slide Menu Content Html
        var header  = '<h1 class="cstm-slidmenu-header">Slide Menu</h1>';
        var contents = '<ul class="cstm-slidmenu-content">';
        contents += '<li>コンテンツ</li>';
        contents += '<li><i class="fab fa-github"></i> <a href="https://github.com/unbam/Leaflet.SlideMenu" target="_blank">GitHub</a></li>';
        contents += '</ul>';

        // SlideMenu
        var options = {
          width: '40%',
          height: '95%'
        }
        L.control.slideMenu(header + contents, options).addTo(map);

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin Leaflet.SlideMenu</title>

<!--

body{ margin-left: 0; }

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

.leaflet-menu {

background-color: #fafafa;

}

.cstm-slidmenu-header {

margin: 0;

background-color: #5cc8ea;

color: #fff;

padding: 5px;

}

.cstm-slidmenu-content {

padding: 0;

margin: 0;

}

.cstm-slidmenu-content li {

list-style-type: none;

font-size: 18px;

padding: 5px;

border-bottom: 1px solid #ccc;

}

i {

padding-left:5px;

}

-->

</style>

</head>

<body>

// Mapの基本設定

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

center: [35.7122, 139.8117],

zoom: 15,

minZoom: 13,

maxZoom: 16,

messagebox: true

});

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

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

}).addTo(map);

// Slide Menu Content Html

var header = '<h1 class="cstm-slidmenu-header">Slide Menu</h1>';

var contents = '<ul class="cstm-slidmenu-content">';

contents += '<li>コンテンツ</li>';

contents += '<li><i class="fab fa-github"></i> <a href="https://github.com/unbam/Leaflet.SlideMenu" target="_blank">GitHub</a></li>';

contents += '</ul>';

// SlideMenu

var options = {

width: '40%',

height: '95%'

}

L.control.slideMenu(header + contents, options).addTo(map);

</script>

</body>

</html>

２．解説

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

２−１．ファイルの配置

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

GitHub-Leaflet.SlideMenu

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

index.html
css/L.Control.SlideMenu.css
js/L.Control.SlideMenu.js

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

2-1で配置した 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/L.Control.SlideMenu.css" />
    <script src="js/L.Control.SlideMenu.js"></script>
<!-- plugin -->

２−３．SlideMenuの設定（HTML）

スライドメニューの内容は、HTMLで記述します。
今回は、ヘッダ部分と、コンテンツ部分に分けたメニューを作成しました。
HTMLで記述できるので、リンクやボタンを配置することもできます。

// Slide Menu Content Html
var header  = '<h1 class="cstm-slidmenu-header">Slide Menu</h1>';
var contents = '<ul class="cstm-slidmenu-content">';
contents += '<li>コンテンツ</li>';
contents += '<li><i class="fab fa-github"></i><a href="https://github.com/unbam/Leaflet.SlideMenu" target="_blank">GitHub</a></li>';
contents += '</ul>';

// Slide Menu Content Html

var header = '<h1 class="cstm-slidmenu-header">Slide Menu</h1>';

var contents = '<ul class="cstm-slidmenu-content">';

contents += '<li>コンテンツ</li>';

contents += '<li><i class="fab fa-github"></i><a href="https://github.com/unbam/Leaflet.SlideMenu" target="_blank">GitHub</a></li>';

contents += '</ul>';

２−４．SlideMenuの設定（CSS）

Step３のHTMLにスタイルを設定します。

.leaflet-menu {
  background-color: #fafafa;
}
.cstm-slidmenu-header {
  margin: 0;
  background-color: #5cc8ea;
  color: #fff;
  padding: 5px;
}

.cstm-slidmenu-content {
  padding: 0;
  margin: 0;
}

.cstm-slidmenu-content li {
  list-style-type: none;
  font-size: 18px;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

i {
  padding-left:5px;
}

.leaflet-menu {

background-color: #fafafa;

}

.cstm-slidmenu-header {

margin: 0;

background-color: #5cc8ea;

color: #fff;

padding: 5px;

}

.cstm-slidmenu-content {

padding: 0;

margin: 0;

}

.cstm-slidmenu-content li {

list-style-type: none;

font-size: 18px;

padding: 5px;

border-bottom: 1px solid #ccc;

}

i {

padding-left:5px;

}

２−５．SlideMenuの設定（Mapに追加）

L.control.slideMenuオブジェクトをL.mapオブジェクトに追加します。

// SlideMenu
var options = {
  width: '40%',
  height: '95%'
}
L.control.slideMenu(header + contents, options).addTo(map);

// SlideMenu

var options = {

width: '40%',

height: '95%'

}

L.control.slideMenu(header + contents, options).addTo(map);

オプション
width：スライドメニューの幅を設定します。
height：スライドメニューの高さを設定します。
※ この他にも多数のオプションがあるので、詳細はGitHubを参照してください。

これで、スライドメニューを地図に表示できました。

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

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

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