勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

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

 - JavaScript

  関連記事

Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法

LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリ ...

Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

leaflet.jsとOSMで現在地を取得しマップ上にマーカーを表示する方法

leaflet.jsとOpenStreetMapで現在位置の経度緯度を取得しマッ ...

leaflet.jsとOSMでマップ表示及びマーカー設置方法

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...