leaflet入門|プラグインで検索機能を追加する(GeoJSONAutocomplete)

leafletのプラグイン「GeoJSONAutocomplete」使用して、地図に検索機能を追加します。

実装後のイメージは以下のようになります。

【検索機能を追加】

Demoはこちらです。

全体のコード

解説

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

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

GeoJSONAutocomplete では、本体とJQueryを読み込む必要があります。

本体はGitHubからダウンロードできます。

Step2:データの準備(GeoJSON)

地図にマッピングするデータはGeoJSON形式で準備します。

今回使用するデータは、以下の5つになります。

・点(3つ)

・ポリゴン(1つ)

・線(1つ)

Step3:オプション設定

GeoJSONAutocomplete のオプションを設定します。

geojsonServiceAddress:Step2で準備したGeoJSONファイルのパスを指定します。
placeholderMessage:検索条件入力欄に表示するメッセージ。
notFoundMessage:検索結果が0件の場合に表示するメッセージ。
notFoundHint:検索結果が0件の場合に、ヒントとして表示するメッセージ。
pointGeometryZoomLevel:検索結果を表示する際の、地図のズームレベルを指定します。

Step4:検索ボックスの追加

検索機能を追加するには、htmlで検索ボックスを配置する場所を指定します。

次に、Step3で作成したオプションを検索ボックスに設定します。

これで、検索機能を追加できました。

まとめ

GeoJSONAutocompleteを使うと簡単に、GeoJSON形式のデータを検索することができました。

似た機能をもつプラグインには、「leaflet-fusesearch」があります。

要件や好みで使い分けというところでしょうか。

スポンサーリンク

シェアする

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

フォローする