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': '元に戻す' } }));
プラグインに関して
今回利用したプラグイン以外にも様々なプラグインがある模様。以下辺りが参考になりそう。
関連記事
-
Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法
Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...
-
Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法
Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...
-
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...
-
架空の地図画像をLeafletを用いてWeb上でマップ表示する方法
ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...
-
Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法
LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...