The yolp-mapbox-static-maps's intro from mapbox

yolp-mapbox-static-maps's Introduction

yolp-mapbox-static-maps

YOLPスタティックイメージからMapbox Static Imagesへの移行JSライブラリ

実装デモをご参照ください。

インストール

yarn add @mapbox/yolp-mapbox-static-maps
# 又は 
npm install @mapbox/yolp-mapbox-static-maps

実装

JSに導入する場合の実装。

import {convert} from 'yolp-mapbox-static-maps'

const yjApiUrl = 'https://map.yahooapis.jp/map/V1/static?appid=/<アプリケーションID>/&lat=35.658619279712&lon=139.74553000746&z=15&width=600&height=600'
const opts = {
    accountId: 'マップボックスID',
    mapboxToken: 'Mapboxトークン',
    style: 'Mapboxで作成した地図のスタイル',
}
const mapboxUrl = convert(yjApiUrl, opts)
console.log(mapboxUrl)
// https://api.mapbox.com/styles/v1/<マップボックスID>/<Mapboxで作成した地図のスタイル>/static/139.74553000746,35.658619279712,13/600x600?access_token=<Mapboxトークン>

又はHTMLに直接埋め込めれます。

<head>
  <script src="https://cdn.." integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>
    <!-- 既存実装方法 -->
    <img src='yolpUrl' />

    <!-- Mapboxへ移行 -->
    <img src='convert(yolpUrl)' />
</body>