leaflet入門9|地図をフルスクリーンで表示する

今回はプラグイン「Leaflet.fullscreen」使用して、地図を通常/フルスクリーン表示の切り替えを行います。

 をクリックするとフルスクリーン表示になります。

Demoはこちらです。

全体のコード

解説

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

step1(プラグインの読み込み)

Leaflet.fullscreenプラグインを使用するため、css・jsファイルを読み込みます。

今回は、CDNから読み込みましたが、GitHubからソースをダウンロードしてローカルのcss/jsを読み込むことも可能です。

こちらからダウンロードできます。

GitHub Leaflet.fullscreen

step2(フルスクリーン表示の設定)

以下の設定だけで、フルスクリーン表示を行うことができます。

title{}は、フルスクリーン表示ボタンの上にカーソルを合わせた時に表示される、ツールチップのテキストを変更できます。

ツールチップを変更しない場合は

とするだけで、フルスクリーン表示を行うことができます。

Leaflet.fullscreen を使用すると簡単にフルスクリーン表示を実装することができます。

次回は、「Leaflet.EasyButton」を使用して地図上にボタンを追加してみたいと思います。

スポンサーリンク

シェアする

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

フォローする