Leafletにて地図を全画面(フルスクリーン)表示機能を追加する方法

Leafletにて表示されている地図に全画面表示ボタンが設置されているサイトがあった。「+(拡大)」「-(縮小)」ボタンだとデフォルトで表示されると思うんだけど、全画面表示はどうすればいいのか調べたところプラグインで対応するみたい。以下にサンプルとソースコードをメモ。

Leaflet.fullscreen(プラグイン)

GitHub

https://github.com/Leaflet/Leaflet.fullscreen

CDN

CDNで使う場合は以下を記述する。

<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' />

サンプル

https://taitan916.info/sample/leaflet.js/plugin/fullscreen/

左上に全画面表示ボタンがありクリックすると全画面表示される筈。

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<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' />
<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
var zoom = 15;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
});
tileLayer.addTo(map);

//全画面表示設定
map.addControl(new L.Control.Fullscreen({
    title: {
        'false': '全画面表示',
        'true': '元に戻す'
    }
}));
</script>

解説等

プラグイン用のファイルをCDN呼び出しし、以下設定を行うと全画面表示ボタンが表示される筈。

//全画面表示設定
map.addControl(new L.Control.Fullscreen({
    title: {
        'false': '全画面表示',
        'true': '元に戻す'
    }
}));

プラグインに関して

今回利用したプラグイン以外にも様々なプラグインがある模様。以下辺りが参考になりそう。

https://leafletjs.com/plugins.html

https://kita-note.com/leaflet-plugin-all