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

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

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

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

【画面イメージ】

サンプル ＞＞＞　https://ok2nd.github.io/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 );