Geolonia の JavaScript API について
Geolonia の JavaScript API は、Mapbox GL JS の拡張クラスで、同じオプションやプロパティ、メソッド等が使用できます。
また、Embed API によって、緯度や経度などのオプションを HTML の data-* 属性を使用して設定することができ、少ない記述で地図アプリケーションの開発を始めることができます。
HTML
<div
id="map"
data-lat="35.6759"
data-lng="139.7449"
data-zoom="14"
></div>
JavaScript
const map = new geolonia.Map('#map')
Mapbox GL JS との互換性
Geolonia の JavaScript API は、Mapbox GL JS を内部で使用しており、Mapbox GL JS のクラス名 mapboxgl を geolonia に置き換えるだけで、すべてのほぼすべてのクラスおよびそのインスタンスメンバー、イベントを利用できます。
Mapbox GL jS:
const map = new mapboxgl.Map( '#map' )
Geolonia:
const map = new geolonia.Map( '#map' )
Map() 以外のクラスも同様に geolonia に置き換えてご利用ください。 (例: geolonia.Popup() など)
- Mapbox と Geolonia の地図では API キーの受け渡しに関する仕様が違うため、API キーに関わる部分だけ互換性がありません。
- また、ベクトルタイルのスキーマが違うため、スタイル用の JSON については仕様は同じですが流用はできません。
プロパティ、メソッドおよびイベントについて
上述しましたが、クラス mapboxgl と geolonia は互換性があります。
geolonia に含まれる各クラスのインスタンスメンバーや、イベントについては、Mapbox GL JS のドキュメントを御覧ください。
https://docs.mapbox.com/mapbox-gl-js/api/
以下は、moveend イベントで、地図の中心点の座標をコンソールに出力するサンプルです。
const map = new geolonia.Map('#map')
map.on('moveend', () => {
console.log(map.getCenter().toArray())
})
サンプルアプリケーション
JavaScript で地図のバックグラウンドにテクスチャを追加
See the Pen Background with data URI pattern by Geolonia (@geolonia) on CodePen.
地図のスタイルを切り替えるためのカスタムコントロールを追加
See the Pen Custom control to switch the style by Geolonia (@geolonia) on CodePen.
複数のマーカーを表示
See the Pen Multiple Markers with GeoJSON by Geolonia (@geolonia) on CodePen.
その他のサンプル
その他、Codepen の Geolonia アカウントで、たくさんのサンプルを紹介しています。
