JavaScript API

Geolonia の JavaScript API の概要を説明いたします。

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')

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

Mapbox GL JS 及び MapLibre GL JS との互換性

Geolonia の JavaScript API は、MapLibre GL JS を内部で使用しており、MapLibre GL JS のクラス名 maplibreglgeolonia に置き換えるだけで、すべてのほぼすべてのクラスおよびそのインスタンスメンバー、イベントを利用できます。また、 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())
})

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

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.

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

地図のスタイルを切り替えるためのカスタムコントロールを追加

See the Pen Custom control to switch the style by Geolonia (@geolonia) on CodePen.

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

複数のマーカーを表示

See the Pen Multiple Markers with GeoJSON by Geolonia (@geolonia) on CodePen.

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

その他のサンプル

その他、CodePen の Geolonia アカウントで、たくさんのサンプルを紹介しています。

CodePen Geolonia on CodePen へ移動