Leaflet入門|地図に住所検索機能をつける(Leaflet Control OSM Geocoder)

Leafletのプラグイン「Leaflet Control OSM Geocoder」を使うと、住所から場所を検索することができます。
このプラグインでは、OpenstreetMap Nominatimを使用して住所から場所を検索します。

実装すると以下のようになります。

 このボタンにカーソルを合わせると住所入力欄が表示されます。

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

Leaflet Control OSM Geocoder の本体は GitHubからダウンロードできます。

GitHub-Leaflet Control OSM Geocoder

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/Control.OSMGeocoder.css
css/images/geocoder.png
js/Control.OSMGeocoder.js

2−2.プラグインの読み込み

2−1で配置した css・jsファイルを読み込みます。

2−3.Control OSM Geocoderの設定

L.Control.OSMGeocoderオブジェクトを生成して、L.mapオブジェクトに追加します。
また、オプションも設定することができます。

position
検索ボタンの表示場所を指定します。

text
検索実行ボタンに表示するボタン名を指定します。

placeholder
検索条件入力欄に表示する補助文言を指定します。

※ その他のオプションは、GitHubに記載されています。

これで、Leaflet Control OSM Geocoder を使って、住所検索機能をつけることができました。

スポンサーリンク

シェアする

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

フォローする