YOLP to Mapbox
全てのドキュメントchevron-rightarrow-leftYOLP to Mapboxchevron-rightYOLPスタティックマップAPIからMapboxスタティック・イメージAPIへの移行ガイド

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

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

実装に必要なアカウントに基づくパラメータはusernameとaccess_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への移行を５分で実現出来る方法を紹介します。上記でサポートされていない機能は対応出来かねますので、ご了承下さい。Mapboxスタティック・イメージAPIの全ての機能を活かしたい場合はこちらのドキュメント（英語）をご参照ください。

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

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

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

移行手順

  1. YOLPスタティックAPIで実装しているHTMLタグとコードを見つける。
  2. Mapboxでアカウントを作る。
  3. Mapbox Studioで地図を作る。二つの手順がありますが手順１を推奨します。

  • 手順１. こちらのページの下に地図の画像があります。その右下にCopyのボタンをクリックしてスタイルを自分のアカウントにインポートします。

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

  1. YOLPスタティックAPIの実装を変換する。

  • 手順１. 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. コード単位で確認したい場合はこちらを参照して下さい。