leaflet入門10|地図にボタンを追加する

今回はプラグイン「Leaflet.EasyButton」使用して、地図にボタンを追加します。

 このボタンをクリックすると、ポップアップメニューが表示されます。

Demoはこちらです。

全体のコード

解説

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

step1(プラグインのバージョン)

Leafletのバージョンと、EasyButtonプラグインの対応は以下となります。

・EasyButton version 2.x.x、Leaflet 1.x.x or higher
・EasyButton version 1.3.x Leaflet 0.7.x

※最新の対応情報は、GitHub-Leaflet.EasyButton でご確認ください。

今回は、Leaflet(1.3.1)、EasyButton(2.3.0)を使用しています。

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

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

css・jsファイルは、GitHubからダウンロードして使用します。

GitHub-Leaflet.EasyButton

また、必須ではありませんが、ボタンに表示するアイコンは 「Font Awesome」も使用できます。

今回はCDNから読み込んでいます。

step3(ボタンの追加・アクションの設定)

以下の設定だけで、ボタンとボタンが押された時のアクションを定義できます。

L.easyButton で ボタンとアクションを定義します。

以下では、ボタンに表示するアイコン( Font Awesome の fas fa-comment-alt)を指定しています。

また、ボタンが押された時のアクションは以下のように定義します。

今回は、地図の真ん中にポップアップメッセージを表示するようにしました。

その他のDemo

先ほどのDemoでは、ボタンクリック時にポップアップを表示しましたが、色々なことができます。

座標切り替え

先ほどの、「step2(ボタンの追加・アクションの設定)」の箇所を以下のようにすると、地図に表示する座標を切り替えることができます。

Demoはこちらです。

ボタンをクリックすると、座標が羽田空港に切り替わります。

1つのボタンに複数のアクションを定義する

「複数のアクション」とは、1つのボタンの状態により、実行する処理を分ける という感じです。

例えば、1つのボタンで 現在地(固定) / 羽田空港の座標の切り替えを行います。

Demoはこちらです。

画像ファイルをボタンのアイコンに指定する

以下のようにすると、画像ファイルをアイコンに指定することができます。

「Leaflet.EasyButton」を使用すると、簡単にボタンを追加することができました。

ぜひ、お試しください。

スポンサーリンク

シェアする

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

フォローする