leaflet入門|地図に検索機能をつける(プラグイン)

今回はプラグイン「leaflet-fusesearch」使用して、地図に検索機能を実装してみます。

以下の実装では、マーカーが検索対象となり、検索結果を選択すると対象のマーカーを地図の中央に表示するという内容です。

Demoでは検索ワードに、「タイトル」や「000」を指定できます。

前方一致なので、「タ」など入力すると候補が一覧で表示されます。

をクリックすると、検索メニューが表示されます。

Demoはこちらです。

全体のコード

 解説

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

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

leaflet-fusesearch を使用するには、leaflet-fusesearch本体とFuse.jsを読み込む必要があります。

それぞれ、以下のサイトからダウンロードできます。

Git-Hub Fuse.js

Git-Hub leaflet-fusesearch

step2(leaflet-fusesearchの設定)

  1. L.control.fuseSearch() で、searchCtrl用のオブジェクトを作成し、mapに追加します。
  2. L.control.layers()で、検索用マーカーを設置するレイヤーを作成し、mapに追加します。

step3(地図に表示するデータの準備)

データはGeoJSONで記述します。

今回はソースに直接記載しましたが、実際は外部ファイルやDBからデータを取得してGeoJSON形式に変換という感じでしょうか。

step4(表示する各地点のマーカーの設定)

設定は、関数(displayFeatures)で行なっています。

引数で取得した各地点情報(features)ごとに、マーカーの設定・ポップアップの設定(bindPopup)を行なっています。

ポップアップの設定は後述します。

上記の例では行なっていませんが、markerのアイコンは地点ごとに変えることもできます。

step5(マーカーに紐つくPopupの設定)

設定は、関数(bindPopup)で行なっています。

ここでは引数(feature)の properties からポップアップに表示する内容を設定しています。

ポップアップの構造は、HTMLで定義します。

表示する内容、構造を自由にいじることができるので使いやすいと思います。

step6(検索対象項目の設定)

検索対象となる項目を指定します。

GeoJSONの properties に定義した属性を指定できます。

以上が leaflet-fusesearch の使用方法となります。

特に設定も複雑ではないので使いやすいと思います。

細かいオプションなどは、GitHub leaflet-fusesearch を参照してください。

スポンサーリンク

シェアする

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

フォローする