Geolonia Maps チュートリアル
Geolonia Maps を使って地図アプリケーションを実装する手順を、6つの Step に分けて解説します。このチュートリアルで扱う内容は次のとおりです。
- 地図を表示する
- 地図のスタイルを変更する
- 地図にマーカーを表示する
- 地図に任意のデータを重ねる
実装方式の選択
Geolonia Maps は3つのライブラリを提供しています。いずれのライブラリでも同じ機能を実装できます。導入先の環境に応じて選択してください。
| ライブラリ | 技術的な前提 | 適した場面 |
|---|---|---|
| embed | HTML のみ。ビルドツールと npm は不要 | HTML タグだけで地図を埋め込む場合 |
| maps-suite | npm によるビルド環境。JavaScript から命令的に操作する | 他の地図サービスからの移行、および既存の JavaScript 資産がある場合 |
| maps-react | npm によるビルド環境と React | React で構築したサイトとアプリケーションに組み込む場合 |
3つのライブラリはいずれも、MapLibre GL JS を Geolonia の地図に対応させた maps-core を基盤としています。TypeScript を使用する場合、MapLibre GL JS のすべての機能をそのまま利用できます。