Leaflet.js に住所検索機能を追加する - Esri Leaflet Tips

10279
0
08-25-2016 10:10 PM
Labels (1)

Leaflet.js に住所検索機能を追加する - Esri Leaflet Tips

みなさま、Leaflet.js というオープンソース地図ライブラリをご存知でしょうか?

Facebook や GitHub、Foursquare、Pinterest といったメジャーな Web サービスで使われています。世界的にポピュラーな地図ライブラリとして、国内でも徐々に利用者が増えてきているようです。

本稿では、この Leaflet.js と弊社の開発者向けプラットフォーム(ArcGIS for Developers)を組み合わせて、地図とその周辺コンポーネント開発で効率化できるポイントをお伝えしていきます。

Leaflet.js とは?

冒頭でも紹介しましたが、もっともポピュラーなオープンソースの地図ライブラリとして世界中で使われています。

この Leaflet.js は軽量なライブラリとして地図表示に必要な最低限の機能を実装しており、追加の機能を実装する場合にはプラグインを組み合わせるというエコシステムを採用しています。

この軽量さから、モバイル ファーストなアプリへの組み込みやパフォーマンス重視の Web サービスにおいて好まれています。

Leaflet.js で背景となる地図タイルの表示とその上にマーカーを落とした、もっとも基本的な実装例を紹介します。

// Leaflet.js の地図コンポーネント(setView で初期表示位置を指定)
var map = L.map('map').setView([35.6792, 139.7406], 5);

// 背景の地図タイル表示(OpenStreetMap のテンプレート URL を参照)
L.tileLayer('
http://
{s}.tile.osm.org/{z}/{x}/{y}.png', {

    attribution: '&copy; <a href="
http://osm.org/copyright
">OpenStreetMap</a> contributors'

}).addTo(map);

// マーカーの表示
L.marker([35.6792, 139.7406]).addTo(map)
    .bindPopup('<b>Esri Japan</b> is here!')
    .openPopup();
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Leaflet.js のクラスはすべて L というグローバル変数にぶら下がっています。

地図タイル(L.tileLayer)であればテンプレート URL を参照し、マーカーは緯度経度を参照して地図に反映しています。どちらも addTo(map) メソッドによって地図に追加を行います。

ちなみにマーカー(L.marker)は bindPopup(<表示コンテンツ>) メソッドを利用することで、クリックした時にポップアップ表示をすることができます。

また、地図追加とポップアップのバインドを上記コードのように jQuery ライクなメソッド チェーンで繋げることができるのも特徴の1つです。

Leaflet プラグイン

先述したように、Leaflet.js には機能付加のためのさまざまなプラグインが存在します。

これらのプラグインもまたオープンソースとして、Leaflet コミュニティによって開発/公開されています。

Leaflet プラグインの一覧は Leaflet Plugins で確認できます。

そのなかでも、ArcGIS for Developers で利用できる様々な地図/位置情報サービスと連携するための Esri Leaflet ※1 というプラグインを紹介します。

今回はこの Esri Leaflet を使って、ArcGIS の住所検索サービス(Esri World Geocoding Service)を利用した住所検索フォームを追加してみたいと思います。

Esri Leaflet Geocoder

Esri Leaflet もまた軽量なツールセットとしてオープンソースで提供しており、ArcGIS で配信する地図サービスを閲覧するための基本機能が主に実装されています。

それ以外の付随機能を利用するには Leaflet.js 同様にプラグインを組み合わせます。住所検索の場合には Esri Leaflet Geocoder というプラグインを利用します。

Esri Leaflet Geocoder には住所検索サービスへのリクエストと検索結果の表示、そしてそれらを利用するためのフォーム UI をセットで提供します。

住所検索フォームの実装

プラグインを使うので、実装と言うほどのコード量ではないですが、以下に実装例を紹介します。

Esri Leaflet Geocoder - JSFiddle

まずは <script> タグで必要なライブラリおよびプラグインを読み込みます。

<!-- Leaflet の読み込み -->
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet.css
" />

<script src="
https://cdn.jsdelivr.net/leaflet/1.0.0-rc.1/leaflet-src.js
"></script>


<!-- Esri Leaflet の読み込み -->
<script src="
https://cdn.jsdelivr.net/leaflet.esri/2.0.0/esri-leaflet.js
"></script>


<!-- Esri Leaflet Geocoder の読み込み -->
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.1.0/esri-leaflet-geocoder.css
">

<script src="
https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.1.0/esri-leaflet-geocoder.js
"></script>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

続いて、先述した地図表示の実装コードに住所検索機能(L.esri.Geocoding)のコードを追記します。

// ArcGIS 住所検索サービス
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();

// 住所検索コンポーネント
var searchControl = L.esri.Geocoding.geosearch({
  providers: [arcgisOnline]
}).addTo(map);

// 検索結果を表示するための空のレイヤー(L.layerGroup)
var results = L.layerGroup().addTo(map);

// 住所検索の結果取得イベント リスナー
searchControl.on('results', function(data){
  // 検索結果をクリア
  results.clearLayers();
  // 検索結果をマーカーとしてレイヤーに追加
  for (var i = data.results.length - 1; i >= 0; i--) {
    results.addLayer(L.marker(data.results[i].latlng));
  }
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

以上で、住所検索機能の実装は完了です。

ArcGIS のサービスを使えば、すぐにカンタンに Leaflet.js に住所検索機能を実装することができます。

住所検索に限らず、さまざまな機能を引き出すことができるので、また引き続き紹介していければと思います。

なお、ArcGIS for Developers 開発者アカウントを作成すれば当サービスを無償 ※2 で利用することができます。

ぜひ、お試しください!

※1 Esri Leaflet は弊社での技術サポートは行っておりません

※2 テスト・開発目的あるいは非商用目的でのアプリ公開(個人/NPO/NGO/教育機関のみ)は無償でご利用いただけます(なお、住所検索サービスには100万リクエスト/月の上限がございます)

関連リンク

Labels (1)
Version history
Last update:
‎12-12-2021 03:44 AM
Updated by: