Leaflet入門９｜地図をフルスクリーンで表示する

今回はプラグイン「Leaflet.fullscreen」使用して、地図を通常/フルスクリーン表示の切り替えを行います。

をクリックするとフルスクリーン表示になります。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Demo9</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='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!-- plugin -->

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

    <script>
      var mymap = 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(mymap);

      var data = [
        {"loc":[35.7101, 139.8107], "title":"test1"},
    	{"loc":[35.7121, 139.8207], "title":"test2"}
      ];

      for(i in data) {
        var marker = L.marker(data[i].loc).addTo(mymap);
        marker.bindPopup("<p>" + data[i].title + "</p>");
      }

      mymap.addControl(new L.Control.Fullscreen({
        title: {
          'false': '最大化',
          'true': '元に戻す'
        }
      }));

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Demo9</title>

<!--

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

-->

</style>

</head>

<body>

var mymap = 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(mymap);

var data = [

{"loc":[35.7101, 139.8107], "title":"test1"},

{"loc":[35.7121, 139.8207], "title":"test2"}

];

for(i in data) {

var marker = L.marker(data[i].loc).addTo(mymap);

marker.bindPopup("<p>" + data[i].title + "</p>");

}

mymap.addControl(new L.Control.Fullscreen({

title: {

'false': '最大化',

'true': '元に戻す'

}

}));

</script>

</body>

</html>

２．解説

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

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

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

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

1 2	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script> <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

今回は、CDNから読み込みましたが、GitHubからソースをダウンロードしてローカルのcss/jsを読み込むことも可能です。

こちらからダウンロードできます。

GitHub Leaflet.fullscreen

２−２．フルスクリーン表示の設定

以下の設定だけで、フルスクリーン表示を行うことができます。

mymap.addControl(new L.Control.Fullscreen({
  title: {
    'false': '最大化',
    'true': '元に戻す'
  }
}));

mymap.addControl(new L.Control.Fullscreen({

title: {

'false': '最大化',

'true': '元に戻す'

}

}));

title{}は、フルスクリーン表示ボタンの上にカーソルを合わせた時に表示される、ツールチップのテキストを変更できます。

ツールチップを変更しない場合は

mymap.addControl(new L.Control.Fullscreen());

1	mymap.addControl(new L.Control.Fullscreen());

とするだけで、フルスクリーン表示を行うことができます。

Leaflet.fullscreen を使用すると簡単にフルスクリーン表示を実装することができます。

次回は、「Leaflet.EasyButton」を使用して地図上にボタンを追加してみたいと思います。