Mapbox GLJS
ブログに地図を載せる
今使っている Zola の Theme に Mapbox 用の Shortcodes が用意されているので Diary で使ってみた。 指定した座標の地図が表示されるのはちょっと楽しい。
地図の埋め込み🔗
Mapbox GLJS は、 GeoJson というので座標とかの地図として表現した内容を書く。 今回書いたのはこんな GeoJson。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [139.27001855725422, 35.63237149897502]
},
"properties": {
"title": "高尾山口駅",
"description": "京王線の駅。この近くにホテルや温泉、飲食店、トリックアート美術館などがかたまっている。リフトやケーブルカーの駅の方へは参道がある。"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [139.2672719752304, 35.631390482306585]
},
"properties": {
"title": "もみじ広場",
"description": "ケーブルカーとリフト、それぞれの乗り場の手前にある広場"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [139.2565866746452, 35.631032421573494]
},
"properties": {
"title": "高尾山駅展望台",
"description": "リフトとケーブルカーで登った先にある展望台の１つ。山頂から見るとまだ中腹あたりらしい。ここからさらに登るなら徒歩になる。"
}
}
]
}
表示はこちらの記事で → 初・高尾山
GeoJson🔗
GeoJson は Mapbox 特有ではなく、オープンな仕様。
https://ja.wikipedia.org/wiki/GeoJSON
Mapbox の API は、これを拡張して Simplestyle という スタイル表記をサポートしているそう。
https://docs.geolonia.com/geojson/
Simplestyle とは Mapbox 社が公開した GeoJSON にスタイル情報を埋め込むための仕様で、GitHub 等で採用されています。
ちなみに、 Mapbox GL JS で座標を表す Point や PointLike のオブジェクトは [経度, 緯度] （x, y） の順なので注意。
Google Map の右クリックからの座標コピーだと逆の順序になっていて、日本じゃないどっかになってしまう。
Geography and geometry | Mapbox GL JS | Mapbox
A Point geometry object, which has x and y properties representing screen coordinates in pixels.
GeoJson の例についてはこちらの記事が勉強になりました。 ありがとうございます。