Mapbox Geocoding API（Mapbox JavaScript SDK）を利用してみた！

f:id:freedom0625:20210509231509p:plain

はじめに

Ruby on Rails で JavaScript を使用しているのですが、今回 Rails 側で登録済みの住所からジオコーディングをして地図に表示するという要件があり、Mapbox の Geocoding API を使用しました。もともと管理者用の画面では、地図を使用している機能があり、Mapbox GL JS を使用しているため、Mapbox の Geocoding API を試しに使用してみました。今回は、Geocoding API を利用するために Mapbox JavaScript SDK を使用してみましたので、簡単に実装方法について紹介したいと思います。

docs.mapbox.com

Geocoding API は、Ruby か JavaScript のどちらで開発するかで迷いましたが、サーバーの負荷も考えて今回は JavaScript で実装することにしました。Mapbox では、Geocoding API のラッパー用として便利なライブラリがあり、今回は、JavaScript 用の Mapbox JavaScript SDK を使用しました。

Mapbox JavaScript SDK とは

Mapbox JavaScript SDK は JavaScript 用の SDK で、ジオコーディング以外にもルート検索など、Mapbox で提供している API の機能を利用することができます。

github.com

利用する場合にはまず開発環境などにインストールする必要がありますが、以下の npm コマンドでインストールできます。

npm install @mapbox/mapbox-sdk

また、それ以外にも CDN 経由で提供しているため、以下の <script> タグを指定して利用することもできます。

 <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.js"></script>
 <script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>

今回は、<script> タグを指定して実装しました。

Mapbox JavaScript SDK のインストールした場合の使用方法や <script> タグでの指定した詳細な方法は、GitHub のガイドで紹介しています。

Mapbox JavaScript SDK のジオコーディングの使用方法

ここでは、コード部分を中心に紹介したいと思います。今回ジオコーディングの処理は別ファイルとして作成し、非同期で呼び出すようにしました。まず、Rails 側の API にアクセスして、ユーザー情報を取得し、ユーザー情報の住所をもとにジオコーディングを行います。ジオコーディングの結果は、Mapbox GL JS の Maker を使用して地図に表示しました。

    // ユーザーの情報を取得
    fetch("/xxxxx/xxxxxx/users", {
      method : "GET",
      contentType: 'application/json'
    }).then(response => {
        if (response.ok) {
            return response.json();
        }
    })
    .then(result => {
        console.log(result);        
        if (result.users.length > 0) {
          // ジオコーディングを行う
          result.users.forEach(user => {
            geocoding(mapboxgl.accessToken, user).then(response => {
              console.log("----------------geocoding------------------");
              console.log(response);
              if (
                  response &&
                  response.body &&
                  response.body.features &&
                  response.body.features.length
              ) {
                  const feature = response.body.features[0];
                  
                  let m = new mapboxgl.Marker({ color: 'black', draggable: true })
                          .setLngLat(feature.center)
                          .setPopup(new mapboxgl.Popup({
                                        offset: 25
                                    }) // add popups
                            .setHTML(
                              '<div class="cMarkerPop">' +
                                 'テキスト：' + feature.text + "<br/>" + 
                                 'ユーザーID：' + response.user.user_id + "<br/>" + 
                                 '名前：' + response.user.name + "<br/>" + 
                                 '住所」' + response.user.address +
                              '</div>'))
                          .addTo(map);
              }

            });
          });
        }
    })
    .catch(err => {
        console.log(err);
    });

以下の処理がジオコーディング部分になります。

export const geocoding = async (my_access_token, user) => {
  const mapboxClient = mapboxSdk({ accessToken: my_access_token });

  try {
    let response = await mapboxClient.geocoding
          .forwardGeocode({
            query: user.address,
            autocomplete: false,
            limit: 5
          })
          .send();

      response.user = user;
      //console.log(response);
      return response;

  } catch(err) {
      console.log(err.message);
  }
};

forwardGeocode メソッドを使用して、query パラメータに住所を指定し、autocomplete は true、limit には 5 を指定しました。limit はデフォルトが 5 で最大は 10 になります。limit はジオコーディングの結果の件数で、幾つか候補をリストとして返却してくれます。実際に結果を表示する際には、どの候補を選択するかはクライアント側での処理が必要になるかと思います。

その他、ジオコーディングの使用方法やパラメータについては、以下のドキュメントをご参照ください。

github.com

また、ジオコーディング API の公式ドキュメントも合わせてご参照ください。