YOLPスタティックマップAPIからMapboxスタティック・イメージAPIへの移行ガイド

‍Yahoo! Open Local Platform(YOLP)で提供されてる‍Yahoo! スタティックマップAPIMapboxスタティック・イメージAPIに切替えをされる方への移行ガイドです。YOLPの導入を行ってない場合は直接ドキュメンテーションを参照してください。Mapboxの仕様を試したい場合はStatic Images Playgroundから行って下さい。

実装に必要なアカウントに基づくパラメータはusernameaccess_tokenです。YOLPで発行したユーザーネームとトークンは全てのMapboxAPIで対応しかねますのでご了承ください。新しく発行する場合はMapboxアカウントページアクセストークンを発行して下さい。

YOLPと主な違い

MapboxスタティックイメージAPIは、YOLPのスタティックマップとは機能が若干異なります。

YOLPのスタティックイメージAPIで作成したURLをお持ちでしたら、こちらのデモで対応可能か確認できます。

YOLPでは可能で、Mapboxでは未対応の機能は主に以下の点となります。

  • 縮尺のスケールバーは指定できません。
  • 画像の拡張子を設定できません。ベクター画像の場合はpng形式で、ラスター画像の場合はjpegで返されます。
  • 測地系は設定できません。
  • YOLPと同じ中心点はご利用いただけません。Markerをご利用下さい。
  • スケールバーはご利用いただけません。
  • 雨雲レーダーは対応できません。
  • YDF形式でのデータはご利用いただけません。GeoJSON形式に変換してご利用下さい。

一方、YOLPでは未対応でMapboxでは可能な機能は主に以下となります。

  • 画像の方角を設定できます。
  • 画像を斜めに傾ける事ができます。
  • マップのスタイルをMapbox Studioでカスタマイズできます。
  • Playgroundで実験できます。

YOLPからライブラリーを使った簡単移行ガイド

はじめに

YOLPスタティックマップAPIで実現できている機能を保ちながら、MapboxスタティックイメージAPIへの移行を5分で実現出来る方法を紹介します。上記でサポートされていない機能は対応出来かねますので、ご了承下さい。Mapboxスタティック・イメージAPIの全ての機能を活かしたい場合はこちらのドキュメント(英語)をご参照ください。

移行前後で、以下のような結果になることが想定されます。

事例YOLPMapbox
地図を表示する
衛星写真を表示する
ピンを立てる
線を描く
円を描く
ポリゴンを描く

こちらの移行は動的に可能で、こちらのデモをご参照ください。

移行手順

  1. YOLPスタティックAPIで実装しているHTMLタグとコードを見つける。
  2. Mapboxでアカウントを作る
  3. Mapbox Studioで地図を作る。二つの手順がありますが手順1を推奨します。
  • 手順1. こちらのページの下に地図の画像があります。その右下にCopyのボタンをクリックしてスタイルを自分のアカウントにインポートします。

  • 手順2. スタイルを一から作る。 スタジオからNew Style -> Basic -> Cusomize Basicとクリックすると地図が表示されます。この画面でレイヤーの表示などを編集できますが、こちらのガイドでは触れません。画面の右上のShareで左側のパネルの下に記載されているStyle URLとAccess tokenを取得して下さい。スタイルURLの形式はmapbox://styles/<ユーザー名>/<スタイル名>です。

  1. YOLPスタティックAPIの実装を変換する。
  • 手順1. HTMLで実装の場合は以下のコードを貼り付けて下さい。

  •   <script
          src="https://unpkg.com/@mapbox/yolp-mapbox-static-maps@0.1.5/dist/yolp-mapbox-static-maps.umd.js"
          type="text/javascript"></script>
      <script>
          // Mapboxの設定
          const mapboxProps = {
              mapboxToken: 'pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA',
              accountId: 'mapbox',
              style: 'streets-v11',
          }
          // 既存で実装しているYOLP スタティックマップAPI
          const image = document.getElementById("static-image");
          const yolpUrl = image.src
          // 変換関数
          const convert = yolpMapboxStaticMaps.convert
          // 画像の置き換え
          image.src = convert(yolpUrl, mapboxProps)
      </script>
    
  • 手順2. import/require文を使う場合、npm install @mapbox/yolp-static-mapsを実行し、

  •   const { convert } = require('yolp-mapbox-static-maps')
    
      // importの場合は
      // import { convert } from 'yolp-mapbox-static-maps'
    
      // Mapboxの設定
      const mapboxProps = {
          mapboxToken: 'pk.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA',
          accountId: 'mapbox',
          style: 'streets-v11',
      }
      // 既存で実装しているYOLP スタティックマップAPI
      const yolpUrl = '...'
      const mapboxUrl = convert(yolpUrl, mapboxProps)
    
  1. コード単位で確認したい場合はこちらを参照して下さい。