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

プラグイン「leaflet-custom-searchbox」使用して、地図にメニューと検索機能を実装してみます。

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

【検索メニュー】

【サイドメニュー】

Demoはこちらです。

※検索ワードで、test1 もしくは test2 で検索すると地図の中心座標を変更します。

全体のコード

 解説

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

step1(leaflet-custom-searchboxの動作に必要な要件)

leaflet-custom-searchbox を使用するには、leaflet-custom-searchboxの本体以外に、以下のプラグインを使用する必要があります。

jquery: 1.12.1
jquery-ui: 1.8.24
leaflet: 1.0.2
google icons: https://google.github.io/material-design-icons/

※最新情報は、leaflet-custom-searchbox のGitHubページを参照してください。

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

jquery と jquery-ui はCDNから読み込んでいます。

leaflet-custom-searchboxのjsとcssはGitHubからダウンロードして使用します。

・js(leaflet.customsearchbox.min.js)

・css(searchbox.min.css)

step3(検索メニューの設定)

メニューに表示する、リンクやボタンなどの各Itemは上記の Items配列の中にそれぞれ定義します。

また、各要素は以下の指定を行います。

type:リンクやボタンなどの種別を指定します。

name:メニューに表示される名前を指定します。

href:type が link の場合、リンク先のURLを指定します。

onclick:type が button の場合、ボタンクリック時に実行する処理を指定します。(関数もOK)

icon:表示するアイコンを指定します。

step4(マーカーの検索処理)

検索処理は、コールバック処理(control._searchfunctionCallBack)として定義します。

今回は、検索ボックスに入力された文字列が、表示用データの title に含まれる(前方一致)の場合、地図の座標を移動する処理を行なっています。

コールバック処理は自由に定義できるので、要件に合わせて色々カスタマイズできそうです。

まとめ

leaflet-custom-searchbox は、検索機能とサイドメニューを使いたい方にはピッタリなプラグインではないでしょうか。

サイドメニューはいらないという方は、「leaflet-fusesearch」「Leaflet Search」プラグインあたりがオススメです。

スポンサーリンク

シェアする

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

フォローする