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>
| 事例 | YOLP | Mapbox |
|---|---|---|
| 地図を表示する | ||
| 衛星写真を表示する | ||
| ピンを立てる | ||
| 線を描く | ||
| 円を描く | ||
| ポリゴンを描く | ||
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent