晴歩雨描

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

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

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

前回、ライブラリ「Leaflet.fullscreen」を使って、フルスクリーン表示機能を追加した。

今回、「Leaflet.fullscreen」を使わずに、「document.body.requestFullscreen()」を使ってフルスクリーン表示機能を追加した。

【画面イメージ】

f:id:art2nd:20210602172756j:plain

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

ボタンのアイコンには、「Font Awesomeアイコン」を使った。

ソースコード

L.easyButton({
	states: [{
		stateName: 'full-screen',
		icon:	'fa-expand',
		title:	 '全画面',
		onClick: function(btn, map) {
			document.body.requestFullscreen();
			btn.state('full-screen-reset');
		}
	}, {
		stateName: 'full-screen-reset',
		icon:	'fa-compress',
		title:	 '元に戻す',
		onClick: function(btn, map) {
			document.exitFullscreen();
			btn.state('full-screen');
		}
	}]
}).addTo( map );