晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:フルスクリーン表示機能追加。Leaflet.fullscreen版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、フルスクリーン表示機能を追加した。

以下のサイトを参考にした。

フルスクリーンに必要なライブラリ「Leaflet.fullscreen」を以下からダウンロードする。

「leaflet.fullscreen.css」と同じディレクトリに、「fullscreen.png」「fullscreen@2x.png」を入れておく。

【画面イメージ】

フルスクリーン切り替えのアイコンが表示される。

f:id:art2nd:20210528214611j:plain

サンプル >>> https://ok2nd.sakura.ne.jp/leaflet/tokyo-07.html

ソースコード

CSSJavaScriptを読み込む。

<link rel="stylesheet" href="css/leaflet.fullscreen.css"/>
<script src="js/Leaflet.fullscreen.min.js"></script>

マップにコントロールを追加する。

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