地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。
今回、フルスクリーン表示機能を追加した。
以下のサイトを参考にした。
フルスクリーンに必要なライブラリ「Leaflet.fullscreen」を以下からダウンロードする。
「leaflet.fullscreen.css」と同じディレクトリに、「fullscreen.png」「fullscreen@2x.png」を入れておく。
【画面イメージ】
フルスクリーン切り替えのアイコンが表示される。
サンプル >>> https://ok2nd.github.io/leaflet/tokyo-07.html
【ソースコード】
CSSとJavaScriptを読み込む。
<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': '元に戻す' } }));