0.1.5 • Published 4 years ago
@mapbox/yolp-mapbox-static-maps v0.1.5
yolp-mapbox-static-maps
YOLPスタティックイメージからMapbox Static Imagesへの移行JSライブラリ
実装デモをご参照ください。
インストール
yarn add yolp-mapbox-static-maps
# 又は
npm run 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 |
---|---|---|
地図を表示する | ||
衛星写真を表示する | ||
ピンを立てる | ||
線を描く | ||
円を描く | ||
ポリゴンを描く | ||