ドキュメントを検索

リファレンス

各ライブラリの型定義から生成した API リファレンスです。

@geolonia/embed

<script> タグと <div> タグだけで地図を表示するライブラリです。地図の設定は data-* 属性で与えます。

EmbedAttributesdata-* 属性の全一覧と既定値があります。プラグインを書く場合は EmbedPlugin を参照してください。

@geolonia/maps-suite

JavaScript から地図を命令的に操作するライブラリです。geolonia.maps 名前空間の下にクラスと型が並びます。

MapMarker のほか、InfoWindowMarkerClustererCirclePolygon などの図形、LatLngLatLngBounds といった値の型があります。ジオメトリの型が混在した GeoJSON をまとめて描画したいときは、Map.data から使う Data レイヤーがあります。

@geolonia/maps-react

React 用のライブラリです。このライブラリだけ、型定義から生成したリファレンスがありません。 props の大半が maps-core のものをそのまま受け取る形なので、下の maps-core のリファレンスにある GeoloniaMapOptionsMap のオプションの一覧にあたります(container を除いたもの)。GeoloniaMapOptions は MapLibre GL JS の MapOptions に Geolonia 独自の項目を足した型なので、地図の初期化オプションの多くは MapLibre 側の説明がそのまま当てはまります。

Map はこれに加えて、containerStyleclassName で入れ物の見た目を決めるプロパティ、onClickonMoveEnd などの地図イベントを受け取るプロパティ、クリック対象のレイヤを絞る interactiveLayerIds、地図インスタンスを取り出す onLoad を持ちます。こちらは maps-react が用意しているもので、MapLibre 側には出てきません。

用意されているコンポーネントは、地図本体の Map、データと描き方の SourceLayerMarkerPopup、コントロール類(NavigationControlGeolocateControlFullscreenControlScaleControlAttributionControl、および自作用の Control)です。複数の地図をまとめて扱う MapProvider と、useMap などのフックもあります。

SourceLayer に渡すものは、MapLibre GL JS のソース定義とレイヤ定義そのままです。paintlayout に書ける項目、filter の式の書き方は MapLibre GL JS のドキュメントを見れば分かります。onLoad で受け取れる地図インスタンスも MapLibre の Map を継承したものなので、同じドキュメントがそのまま使えます。

実際の使い方はmaps-react チュートリアルと、各ハウツーの react タブを参照してください。

@geolonia/maps-core

上の3つが、共通の土台として使っているライブラリです。基本的にはMapLibre GL JSをベースにGeolonia独自の地図へのアクセスや便利機能を追加したものになります。直接使う場面は多くありませんが、地図インスタンスのオプションや、各ライブラリが内部で何をしているかを確かめたいときに参照してください。

maps-coreの中核である GeoloniaMapMapLibre GL JS の Map クラスを継承して、Geolonia の地図(API キーの扱い、スタイル名の解決、既定のコントロールなど)に対応させたものです。そのため、flyTo()addLayer()on() といった MapLibre の機能はそのまま使えます。Geolonia 側で足したものだけが上のリファレンスに載っているので、継承した側の API は MapLibre GL JS のドキュメント、とりわけ Map クラスのリファレンスを参照してください。対応しているのは MapLibre GL JS v5 系です。

地図本体の GeoloniaMap とそのオプション GeoloniaMapOptionsGeoloniaMarker、GeoJSON にスタイルを当てる SimpleStyle などがあります。


手順を追って学ぶならチュートリアル、目的から探すならハウツーを参照してください。