Geolonia Maps チュートリアル
Geolonia Maps を使って地図アプリケーションを実装する手順を、6つの Step に分けて解説します。このチュートリアルで扱う内容は次のとおりです。
- 地図を表示する
- 地図のスタイルを変更する
- 地図にマーカーを表示する
- 地図に任意のデータを重ねる
HTML ファイルを直接開いても地図は表示されません
HTML を保存して file:// で開く（ダブルクリックや open index.html）と、デモキー YOUR-API-KEY では地図が描画されません。index.html を置いたフォルダで簡易サーバーを起動し、localhost として開いてください。python3 -m http.server なら http://localhost:8000/ を、npx serve なら起動時に表示される URL を開きます。詳しくは Step 0 を参照してください。
実装方式の選択
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 のすべての機能をそのまま利用できます。