JavaScript を使用した高度なカスタマイズ

MapLibre GL JS との互換性

Geolonia の Embed API は、MapLibre GL JS の拡張クラスであり互換性があります。

const map = new geolonia.Map( '#map' )

map.on('load', () => {
  setInterval( () => {
    map.rotateTo( map.getBearing() + 90 )
  }, 3000 )
})

See the Pen Rotate the Map by Geolonia (@geolonia) on CodePen.

CodePen でサンプルコードを編集

上の例では、map という ID 属性をもつ要素に対して地図を設置し、その Map オブジェクトを map という変数に代入しています。

Geolonia の JavaScript API の geolonia.Map は、maplibregl.Map の拡張クラスであり、Map オブジェクトは全く同じものです。maplibregl.Popup や maplibregl.Marker などの他のクラスも同様に内蔵されていますので、それぞれ geolonia.Popup や geolonia.Marker として使用することができます。

詳細は JavaScript API のドキュメントを御覧ください。

class 属性 geolonia について

JavaScript を使用する場合は、クラス属性に geolonia という値は使用しないようにご注意願います。

Geolonia の Embed API は、ロードされるとページ内に含まれる .geolonia を document.querySelectorAll() で検索し、それらを地図用のコンテナとして用いようとします。

この時、みなさんのウェブページの表示速度に悪影響を及ぼさないように、それぞれの地図に対して IntersectionObserver を使用して遅延ロードが行われるようにセットされます。

したがって、地図コンテナが画面の表示範囲内に入るまで（もしくは CSS の display プロパティの値が block になるまで） Map オブジェクトが空になりますので、クラス属性に geolonia という値をセットしてしまうと、みなさんの JavaScript が期待通りに動作しないことが予測されますのでご注意ください。