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

Geolonia の地図は国際化にも対応しています。このページでは、地図の言語の設定方法について紹介します。

Mapbox GL JS との互換性

Geolonia の Embed API は、Mapbox 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 は、mapboxgl.Map の拡張クラスであり、Map オブジェクトは全く同じものです。mapboxgl.Popupmapboxgl.Marker などの他のクラスも同様に内蔵されていますので、それぞれ geolonia.Popupgeolonia.Marker として使用することができます。

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

class 属性 geolonia について

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

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

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

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

JavaScript API を使用するときは、地図を設置するコンテナのクラス属性の値に geolonia を使用しないでください。