leaflet入門|プラグインでフルスクリーン表示の切り替え(leaflet.zoomfs)

leafletのプラグイン「leaflet.zoomfs」使用して、フルスクリーン表示の切り替えを行います。

実装すると以下のようになります。

 このボタンをクリックすると、フルスクリーン表示の切り替えができます。

Demoはこちらです。

全体のコード

解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

Step1:プラグインの読み込み

leaflet.zoomfsの css・js は GitHubからダウンロードできます。

GitHub-leaflet.zoomfs

Step2:leaflet.zoomfsの設定

zoomfsコントロールをインスタンス化しマップに追加します。

Step3:フルスクリーンアイコンを設定

フルスクリーンアイコンはGitHubのソースに含まれていないため、自身で用意する必要があります。

今回は「GitHub-Font-Awesome-SVG-PNG」の「arrows-alt.png」を使用します。

CSSで次のクラスを定義します。

Step4:イベントの登録(オプション)

フルスクリーン表示の切り替え時のイベントを定義することができます。

以上で、leaflet.zoomfs の実装が完了です。

まとめ

leaflet.zoomfs を使ってフルスクリーン表示の切り替えを行いました。
フルスクリーン切り替えの他のプラグイン(leaflet.fullscreen)と比べると、アイコンを用意する必要がありますが、表示切り替え時のイベントを簡単に登録することができるため、イベント処理を行いたい場合は、leaflet.zoomfs の方が簡単に実装できそうです。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする