地図を、
HTML 2 行から。
Geolonia Maps — 日本の Web サイトとアプリのための
MapLibre GL JS 互換 地図ライブラリ
会社概要
| 商号 | 株式会社 Geolonia（Geolonia Inc.） |
|---|---|
| 親会社 | ジオテクノロジーズ株式会社（GeoTechnologies, Inc.） |
| 設立 | 2019年8月 |
| 資本金 | 67,022千円（資本準備金 45,010千円） |
| 本社所在地 | 〒113-0021 東京都文京区本駒込二丁目28番8号 |
| 役員 |
|
| 従業員数 | 27名 |
- デジタル庁
- 国土交通省
- 国土地理院
- NHK
- ソフトバンク株式会社
- 株式会社竹中工務店
- 高松市
- 焼津市
- 那須塩原市
- 延岡市
- 鳥取県
- 空間ID（経済産業省 / DADC）
ID 付与のための計算式の考案、共通ライブラリの無償提供 - スマートシティリファレンスアーキテクチャ（内閣府）
地理空間情報連携基盤の仕様策定、SCRA 第3版〜第5版の執筆
Web に地図を載せる、いちばん短い道
Geolonia Maps は、Web サイトやアプリに地図を組み込むためのライブラリ群です。すべて MapLibre GL JS の上に作られていて、HTML だけの手軽さから、React での本格的なアプリ開発まで同じ地図で対応します。
<div> と <script> の 2 行で地図が出ます。ビルドツールも npm もいりません。位置・マーカー・データは data-* 属性で書くだけ。
3 つのライブラリ、1 つの地図
<div> の data-* 属性で宣言的に設定。CMS やペライチの Web ページに地図を貼るならこれ。
<div class="geolonia" data-zoom="14"></div>
Map・Marker・InfoWindow を命令的に操作。Google Maps に慣れた人がそのまま書けるクラス構成。
new geolonia.maps.Map(el, { apiKey })
Map・Source・Layer・Marker をコンポーネントとして宣言。state と自然につながります。
<Map apiKey="…" zoom={14} />
GeoloniaMap は MapLibre GL JS の Map を継承。API キー・スタイル名の解決・既定のコントロールを担う共通基盤
flyTo()・addLayer()・on() など、どのライブラリからでも全機能に届く
必要なのは 2 つのタグだけ
class="geolonia" の <div> が地図になり、CDN の <script> がページ内のそれを探して描画します。<div> の中に書いた HTML はマーカーのポップアップに。右の地図は、左のコードそのままで動いています。
ピンをクリックするとポップアップが開きます。data-gesture-handling="off" は地図が画面を占めるページ向けの設定（既定 on は Ctrl / 2 本指で操作）。
JR・地下鉄各線
Google Maps に慣れた手で、そのまま書ける
- Map / Marker / InfoWindow の「地図を作って、メソッドを呼ぶ」書き方
MarkerClusterer、Polyline・Polygon・Circle、Map.dataレイヤーまで揃った構成<geolonia-map>カスタム要素で、HTML タグだけでも置けるmap.getGeoloniaMap()で MapLibre GL JS の API にそのまま届く
google.maps.* → geolonia.maps.* の対応表と手順を持っています。
地図も React のコンポーネントとして
- Marker の子要素がポップアップになる。JSX なのでコンポーネントも入れられる
- 配列を
map()するだけでデータ駆動のマーカーに SourceとLayerには MapLibre のソース・レイヤー定義をそのまま渡すonClick・onMoveEnd・onLoadなど地図イベントは props で受け取る
GeoloniaMapOptions（＝ MapLibre の MapOptions ＋ Geolonia の拡張）から container を除いたものが、そのまま Map の props です。
データと見た目を分ける、ベクトルタイル
geolonia/basic-v2 は 139 のレイヤーでできています。
迅速更新：地図はいつも新しい
道路が開通した、お店ができた。現地の変化が、短い周期で地図に反映されます。
公式スタイルは 名前を書くだけで切り替え
embed なら data-style="geolonia/midnight"、maps-suite / maps-react なら style オプション。外部の style.json の URL も指定できます。
geolonia/basic-v2標準スタイル。省略時はこれ。OpenStreetMap ベース
geolonia/gsi国土地理院のベクトルタイル。地理院地図に近い表現
geolonia/midnight濃紺ベースのダーク。暗い画面や色の強いデータの下地に
geolonia/red-planet暗い赤をベースにしたスタイル
geolonia/notebook白ベースの淡いスタイル。重ねたデータを主役にしたいときに
geolonia/homeworkNatural Earth の世界地図。国境と国名中心の 9 レイヤー
geoloniamaps/smartcity-base国土地理院の最適化ベクトルタイルを PMTiles 形式で読む
https://…/style.json外部・自作スタイル。Geolonia 以外のタイルなら API キー不要
各スタイルに日本語版と英語版があり、data-lang（ja / en / auto）で切り替わります。ライブデモで実際に切り替えられます。
まず動かして、公開するときにキー
YOUR-API-KEY はキー発行なしで使えるデモキー。許可済みの開発・プレビュー環境でだけ地図が出ます。
YOUR-API-KEY の部分だけ。embed はビルド不要なので、HTML を静的ホスティングに置けば公開完了です。
保存した HTML をダブルクリックで開く（file://）とデモキーでは表示されません。npx serve や python3 -m http.server で localhost として開きます。このデッキ自体もデモキーで動いています。
API キーの設定を YAML で管理する
- 地図を描く前の準備と運用を担う公式ツール
- キーの作成、許可オリジンの追加・削除、
pull→plan→applyで差分を見てから反映 - 現在のプラン・今月の地図表示回数・上限を、ダッシュボードを開かずに確認
generate-access-tokenで CI からも使える
地図のコードは、AI エージェントに
Geolonia Agent Skills は、Claude Code に Geolonia Maps の正しい書き方を教えるプラグインです。
- 古い CDN パスや廃止スタイル名を書いてしまう、学習時点の知識のズレを防ぐ
- maps：embed・JavaScript API・ジオコーディング・スタイル
- geolonia-google-maps-migration：Google Maps からの移行手順と対応表
- 必要なときだけ参照ファイルを読む構成で、毎回プロンプトに貼らなくていい
このライブデッキも、Claude Code で作りました。
さわって確かめる
ここから先の地図は、すべて実際に動いています。
embed v6.0.1 ＋ デモキー YOUR-API-KEY
視点はすべて data-* 属性で決まる
スライダーを動かすと地図とコードが同時に変わります。地図をドラッグ・回転すると、その視点を再現するコードが左に出ます。
同じ場所を、違う見た目で
スタイル名を変えるだけで地図全体の見た目が入れ替わります。実行時は map.setStyle("geolonia/gsi") のように、論理名のまま差し替えられます。
GeoJSON の URL を書けば、データが載る
data-geojson に 400 地点の GeoJSON を指定しています。marker-color・marker-symbol・title などの simplestyle プロパティがそのまま見た目とポップアップになります。
data-3d="on" で、街が立ち上がる
3D の建物は Geolonia の標準スタイルに最初から入っています。形と高さはベクトルタイルから来るので、用意するデータはありません。視点を傾けるだけです。
属性 1 つで、データを塗り分ける
data-choropleth・data-heatmap・data-circle-* に GeoJSON のプロパティ名を書くだけで、コロプレス・ヒートマップ・データ駆動の円が描けます。JavaScript は要りません。
引いて見れば、地球儀になる
投影法を globe にすると、縮小時は地球儀、拡大すると通常の地図へなめらかにつながります。embed v6 は MapLibre GL JS v6 を同梱しています。
embed のバージョン: —
住所の表記ゆれを吸収して、場所を出す
@geolonia/normalize-japanese-addresses は住所を正規化し、その地点の緯度経度も返します。漢数字・旧字体・「丁目」の省略などの揺れを吸収します。
無料で始める
月 20,000 回までは Free プランで 0 円。
料金プランと始め方
月 20,000 回まで、無料
| Pro の従量課金（月の回数） | 1 回あたり |
|---|---|
| 50,001 〜 100,000 回目 | 0.4 円 |
| 100,001 〜 500,000 回目 | 0.3 円 |
| 500,001 〜 1,000,000 回目 | 0.225 円 |
| 1,000,001 〜 5,000,000 回目 | 0.12 円 |
| 5,000,001 回目以降 | 0.06 円 |
地図表示回数は、地図がユーザーの端末に表示された回数です。ページの下のほうにあって画面に表示されなかった地図は数えません。
金額は税抜です（税込を併記した箇所を除く）。料金は円建てなので、為替が動いても変わりません。
出典: Geolonia Docs の料金ページ。Google Maps や Mapbox からの切り替えは コスト削減診断で、先月の請求額から月額を試算できます。
4 ステップで始める
localhost や GitHub Pages などの開発環境・プレビュー環境なら、API キーを発行しなくてもデモキー YOUR-API-KEY で地図を表示できます。この表示は回数に数えません。
app.geolonia.com）で API キーを発行します。Free プランは支払い方法の登録なしで使えます。API キーには、地図を表示するサイトの URL を登録します。
ページビューから月額の目安を出す方法は 料金の目安にあります。地図のあるページのページビューだけを数えると、見積もりが正確になります。
付録
embed の data-* 属性一覧・ライブラリごとの対応表・用語集
embed の主な data-* 属性
| 属性 | 既定 | 内容 |
|---|---|---|
| data-lat / data-lng | — | 地図の中心（両方そろったときだけ有効） |
| data-zoom | 0 | ズーム。11 で市全体、14 で地区、16 で建物 |
| data-pitch / data-bearing | 0 | 傾き / 回転（度） |
| data-style | basic-v2 | スタイル名、または style.json の URL |
| data-lang | auto | ja / en / auto |
| data-marker | on | 中心のマーカー。子要素がポップアップ |
| data-marker-color | #E4402F | マーカーの色 |
| data-open-popup | off | 読み込み時にポップアップを開く |
| 属性 | 既定 | 内容 |
|---|---|---|
| data-geojson | — | GeoJSON の URL（CSS セレクタも可） |
| data-cluster | on | 近い点をまとめる |
| data-3d | off | 3D の建物（Geolonia スタイルのみ） |
| data-navigation-control | on | ズーム・回転ボタン（位置も指定可） |
| data-geolocate-control | off | 現在地ボタン |
| data-fullscreen-control | off | 全画面ボタン |
| data-scale-control | off | 縮尺 |
| data-gesture-handling | on | Ctrl / 2 本指で操作（ページのスクロールを妨げない） |
全属性と既定値は EmbedAttributes リファレンス。コントロール系は on / off のほか top-left などの位置も指定できます。
どのライブラリで、何ができるか
| やりたいこと | embed | maps-suite | maps-react |
|---|---|---|---|
| 地図の表示・視点・スタイル・言語 | data-* 属性 | オプション | props |
| GeoJSON の表示・クラスタリング | data-geojson | map.data / MarkerClusterer | Source + Layer |
| 複数マーカーにそれぞれポップアップ | GeoJSON で代替 | Marker + InfoWindow | Marker の子要素 |
| 3D の建物 | data-3d="on" | 既定で有効 | {...{ "3d": true }} |
| コロプレス・ヒートマップ | data-choropleth / data-heatmap | getGeoloniaMap() | Layer / onLoad |
| 地球儀 | JS で MapLibre API | getGeoloniaMap() | Layer / onLoad |
| ビルドツール | 不要 | npm | npm + React |
embed でも geolonia.Map は MapLibre GL JS の Map なので、JavaScript を書けば全機能に届きます（このデッキの地球儀のデモがその例です）。
用語集
まずは 2 行、貼ってみてください。
ドキュメント・チュートリアル・How-to はすべて日本語で。
デモキーなら、キーの発行を待たずに今日から試せます。
Geolonia, Inc. · Geolonia Maps