Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに住所や建物名(東京タワー)等を入力すると検索できる機能を追加したい。「leaflet-control-geocoder」プラグインを導入することで実装できる模様。以下にサンプル及びソースコードをメモ。

leaflet-control-geocoder

GitHub

https://github.com/perliedman/leaflet-control-geocoder

ドキュメント

https://www.liedman.net/leaflet-control-geocoder/docs/index.html

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/2.4.0/Control.Geocoder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/2.4.0/Control.Geocoder.min.css">

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-control-geocoder/

マップ右上に検索用テキストボックスが表示され、住所や建物名(東京タワー)等を入力すると検索できる。

実装方法

ソースコード

<div id="map"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/2.4.0/Control.Geocoder.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/2.4.0/Control.Geocoder.min.css">

<script>
let map;
map = L.map('map');

//中心の経度緯度
const center = ['35.681236', '139.767125'];

//ズームレベル
const zoom = 12;

//マップの中心地とズームレベルを指定
map.setView(center, zoom);

const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 19
});
tileLayer.addTo(map);

//住所検索機能
const option = {
    collapsed: false, //コントローラーの折り畳み
    placeholder: '住所を入力してください。', //プレースホルダーテキスト
    errorMessage: '見つかりませんでした', 
    showUniqueResult: false,
}
L.Control.geocoder(option).addTo(map);

</script>

所感

デフォルトのままだと検索の精度が低めに感じた。ジオコーダーを変更することで改善するかもしれないが、APIキーの用意が必要だったりでちょっと面倒なところ。