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

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

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

 このボタンでフルスクリーンの切り替えができます。

Demoはこちらです。

全体のコード

解説

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

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

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

GitHub-leaflet.fullscreen

Step2:leaflet.fullscreenの設定

L.Mapをインスタンス化する際に、fullscreenControl を有効(true)にします。

オプション(fullscreenControlOptions)は以下のようになります。

・position:ボタンの配置場所を指定
・title:ボタンのツールチップに表示するメッセージ(open)
・titleCancel:ボタンのツールチップに表示するメッセージ(close)
・forceSeparateButton:true or false(default)
true:拡大・縮小ボタンとフルスクリーンボタンを離して表示
false:拡大・縮小ボタンとフルスクリーンボタンを並べて表示

Demoでは、forceSeparateButton を コメントアウトしていますが、コメントアウトを外すとフルスクリーンボタンが拡大・縮小ボタンと離れて表示されます。

以上で実装完了です!

まとめ

leaflet.fullscreenを使うと簡単に、フルスクリーンの切り替えを実装することができました。オプションの詳細はGitHub-leaflet.fullscreenを参照してください。

スポンサーリンク

シェアする

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

フォローする