Geolonia の JavaScript API について
Geolonia の JavaScript API は、MapLibre 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 及び MapLibre GL JS との互換性
Geolonia の JavaScript API は、MapLibre GL JS を内部で使用しており、MapLibre GL JS のクラス名 maplibregl を geolonia に置き換えるだけで、すべてのほぼすべてのクラスおよびそのインスタンスメンバー、イベントを利用できます。また、 Mapbox GL JS についても多くの互換性があります。
MapLibre GL JS:
const map = new maplibregl.Map( '#map' )
Geolonia:
const map = new geolonia.Map( '#map' )
Map() 以外のクラスも同様に geolonia に置き換えてご利用ください。 (例: geolonia.Popup() など)
- MapLibre 及び Mapbox と Geolonia の地図では API キーの受け渡しに関する仕様が違うため、API キーに関わる部分だけ互換性がありません。
- また、ベクトルタイルのスキーマが違うため、スタイル用の JSON については仕様は同じですが流用はできません。
プロパティ、メソッドおよびイベントについて
上述しましたが、 geolonia に含まれる API maplibregl と互換性があります。
geolonia に含まれる各クラスのインスタンスメンバーや、イベントについては、MapLibre GL JS のドキュメントを御覧ください。
https://maplibre.org/maplibre-gl-js-docs/api/
以下は、moveend イベントで、地図の中心点の座標をコンソールに出力するサンプルです。
const map = new geolonia.Map('#map')
map.on('moveend', () => {
console.log(map.getCenter().toArray())
})
Simplestyle を JavaScript で扱う
JavaScript API で Simplestyle を適用する場合は、geolonia.SimpleStyle のインターフェースを利用できます。以下は、GeoJSON を地図に追加した上で fitBounds メソッドをコールし描画された地物に合わせて地図を移動するサンプルです。
fitBounds メソッドのオプションは Map.fitBounds メソッドと互換性があります。
詳細は MapLibre GL JS のドキュメントをご覧下さい。
https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbounds
const map = new geolonia.Map('#map')
map.on('load', async () => {
const resp = await fetch('https://raw.githubusercontent.com/geolonia/docs.geolonia.com/master/geojson/example.geojson')
const geojson = await resp.json()
new geolonia.SimpleStyle(geojson)
.addTo(map)
.fitBounds()
})
サンプルアプリケーション
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 アカウントで、たくさんのサンプルを紹介しています。
