leaflet入門8|地図上にマーカーの検索機能を追加する

leaflet(1.3)を使ってマップを表示します。

今回はプラグイン「leaflet-search」使用して、マーカーの検索機能を実装します。

Demoはこちらです。

使用するファイルは、GitHubからダウンロードできます。

GitHub leaflet-search

全体のコード

解説

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

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

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

 step2(検索コンソールの設定)

以下の部分で、検索用コンソールの設定を行います。

① で検索用レイヤーを作成し、マップに追加しています。

② では検索用コンソール自体の設定を行い、addControlでマップに追加しています。

 step3(マーカーの追加)

地図に表示するマーカーの設定を行います。

マーカーは、検索用レイヤーに追加します。

① でマーカー用データを3つ定義しています。

② でそれぞれのデータをマーカーにして、検索用レイヤーに追加しています。

L.Markerの第一引数に「緯度経度」、第二引数に「検索対象の文字列」を指定します。

今回の場合は、「検索対象の文字列」に title を指定しているため、「タ」で検索すると

タイトル1〜3が候補として表示されます。

基本的な使用方法は以上になります。

次はちょっとしたカスタマイズを行います。

カスタマイズ

1.検索用文字列を変える

先ほどの例では、title属性を検索対象の文字列に指定しました。

次は、 description を指定してみたいと思います

デモは、こちら

変数 title に代入する値を description に変更しました。

これだけで、検索対象の文字列が変更できます。

2.検索したマーカーを円で囲む

複数マーカーがある場合、検索コンソールで選択したマーカーがどれか分かりづらいこともあります。

その場合は、選択したマーカーを円で囲むと分かりやすくなります。

デモは、こちら

検索用コンソールの設定で

と指定するだけで、選択したマーカーを円で囲むことができます。簡単で便利です!

leaflet-search には、まだまだオプションがあります。ご興味のある方はGitHubを参照してみて下さい。

次回は、Leaflet.fullscreen を使用して地図をフルスクリーンで表示してみたいと思います。

スポンサーリンク

シェアする

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

フォローする