浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【leaflet】leaflet-control-geocoderライブラリを使って住所を検索する

※このライブラリは以下の環境で動作しています。

フレームワーク:cordova,react

パッケージ管理:npm

leafletのプラグインの一つ「leaflet-control-geocoder」を使うと、住所から場所を探すことができます。

実装方法は以下の通り

npm i leaflet-control-geocoderコマンドでライブラリを入手

index.htmlのheadタグ内に以下のlinkタグとscriptタグを配置します。

<pre class="wp-block-syntaxhighlighter-code"><link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<a href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js">https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js</a></pre>

必要最低限の実装の場合は以下の形になります。

var map = L.map('map').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.Control.geocoder().addTo(map);

実装後の画面を見てみると、右上に虫眼鏡のマークをしたフォームが出ているかと思いますが

これをタップすると下記の画像のようにフォームがにゅっと横に伸びて住所を入力できるように

なります。

番地まで細かい住所は検索できませんが、町名までなら難なく探すことができます。

また、入力時の情報も以下のコールバックで取得することができます。

.on('markgeocode', function(e) {
        var bbox = e.geocode.bbox;
        var poly = L.polygon([
          bbox.getSouthEast(),
          bbox.getNorthEast(),
          bbox.getNorthWest(),
          bbox.getSouthWest()
        ]).addTo(map);
        map.fitBounds(poly.getBounds());
      })

  • この記事いいね! (0)