JavaScript API

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

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

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

Mapbox GL JS との互換性

Geolonia の JavaScript API は、Mapbox GL JS を内部で使用しており、Mapbox GL JS のクラス名 mapboxglgeolonia に置き換えるだけで、すべてのほぼすべてのクラスおよびそのインスタンスメンバー、イベントを利用できます。

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 については仕様は同じですが流用はできません。

プロパティ、メソッドおよびイベントについて

上述しましたが、クラス mapboxglgeolonia は互換性があります。

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())
})

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

サンプルアプリケーション

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 へ移動