---
title: "MapLibreとは？GL JS 6系の使い方とPMTilesによる自前タイル配信の構成"
url: "https://www.issoh.co.jp/tech/details/19157/"
published: 2026-11-01
updated: 2026-11-01
categories: ["業務システム"]
publisher: "株式会社一創"
---
# MapLibreとは？GL JS 6系の使い方とPMTilesによる自前タイル配信の構成
MapLibreは、Webやスマートフォンのアプリに拡大・回転できるベクタ地図を組み込むための、オープンソースの地図ライブラリ群です。2020年12月にMapbox GL JSが独自ライセンスへ移った際、最後のオープンソース版から分岐して生まれました。この記事では、2026年11月1日時点の最新版MapLibre GL JS 6.16.0を前提に、地理院タイルに拠点を重ねるコード、6系で変わった読み込み方、PMTilesを使ってタイルサーバーを持たずに地図を配る構成、MapboxやLeafletとの選び分けをまとめました。業務システムに地図画面を組み込む設計・実装の担当者向けです。
## まとめ：MapLibreを選ぶ地図案件と、Mapbox・Leafletで足りる案件の境目
MapLibreが向くのは、数万件規模の地物を滑らかに描きたい、地図の配色やラベルを業務に合わせて作り込みたい、それでいて表示回数による従量課金や利用規約の縛りは避けたい、という案件です。ライブラリはBSD-3-Clauseで、ロード数の課金はありません。
その代わり、背景地図のタイルは自分で調達します。国内なら地理院タイル、自前のデータならPMTilesをS3やCDNに置く構成で、サーバーの運用を増やさずに済みます。地図の作り込みが不要で点を数千件打つだけならLeaflet、タイル配信まで丸ごと任せたいならMapboxを選んでください。
## MapLibre：Mapbox GL JS 1.13を分岐元とするOSS地図ライブラリ群
MapLibreは単一のライブラリ名ではなく、[MapLibreの公式サイト](https://maplibre.org/)に並ぶ複数のプロジェクトと、それを開発するコミュニティの総称です。
### 2020年12月のMapbox GL JS v2ライセンス変更とフォークに至った経緯
[MapLibre GL JSのREADME](https://github.com/maplibre/maplibre-gl-js)は、Mapboxが2020年12月に非OSSライセンスへ切り替えたことを分岐の契機と説明しています。現在の[Mapbox GL JSのLICENSE.txt](https://github.com/mapbox/mapbox-gl-js/blob/main/LICENSE.txt)は、v2以降の利用を「関連するMapbox製品との併用のみ」に限り、Mapboxアカウントが失効するとライセンスも自動で終わると定めています。
MapLibreはこの変更前の1.13系を引き継ぎ、npmでは2020年12月10日に`maplibre-gl`の1.13.0-rc.1が公開されました。ライセンスは[LICENSE.txt](https://github.com/maplibre/maplibre-gl-js/blob/main/LICENSE.txt)のとおりBSD-3-Clauseで、他社のタイルや自前のタイルと自由に組み合わせられます。Mapbox側の料金とライセンスの細部は[Mapboxの料金・ライセンスとGL JSの実装手順](https://www.issoh.co.jp/tech/details/18675/)で整理しています。
### GL JS・Native・Style Spec・Martinの開発対象と役割分担
業務システムで関わるのは、主に次の4つです。
- MapLibre GL JS：ブラウザでベクタタイルをWebGLで描くTypeScript製ライブラリ。この記事の中心
- [MapLibre Native](https://github.com/maplibre/maplibre-native)：Android・iOS・デスクトップ向けのC++製ライブラリ。OpenGL・Metal・Vulkanで描画
- [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/)：どのデータをどの順番・色で描くかを書くJSONの仕様
- [Martin](https://maplibre.org/martin/)：PostGISやPMTilesからベクタタイルを配信するRust製のタイルサーバー
Webの地図画面を作るだけなら、GL JSとStyle Specificationの2つを押さえれば足ります。同じスタイルJSONをWebとスマホアプリの両方で使える点が、Leafletに無い強みです。
## MapLibre GL JS 6.16をCDNで読み込み、地理院タイルに拠点を重ねる手順
ここでは、ビルド環境なしで動くCDN版を使い、国土地理院の淡色地図の上に拠点を描くところまでを書きます。骨格は[公式ドキュメントのQuickstart](https://maplibre.org/maplibre-gl-js/docs/)に沿っています。
### ESM専用になった6系のmodule読み込みと地図コンテナの準備手順
6系から配布物はESモジュールだけになり、`
```
公式のサンプルは`@^6.16.0`と範囲指定で読み込みますが、業務システムでは版を固定しておくほうが安全です。週1回前後の頻度で新版が出ており、2026年10月だけでも6.12.0から6.16.0まで5回更新されています。
### スタイルJSONで地理院の淡色地図を背景にし、出典表示を入れる設定
MapLibreは背景地図を同梱していません。`style`にスタイルJSONを渡し、その中でタイルの取得先を指定します。[地理院タイル一覧](https://maps.gsi.go.jp/development/ichiran.html)によると、Webでリアルタイムに読み込む利用は出典の明示だけで申請不要です。
```
const map = new maplibregl.Map({
container: 'map',
center: [139.767, 35.681], // [経度, 緯度]（東京駅付近）
zoom: 12,
style: {
version: 8,
sources: {
gsi: {
type: 'raster',
tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
tileSize: 256,
minzoom: 5,
maxzoom: 18,
attribution: '地理院タイル'
}
},
layers: [{ id: 'gsi-pale', type: 'raster', source: 'gsi' }]
}
});
map.addControl(new maplibregl.NavigationControl());
```
Leafletから移ってくると、座標の順序で必ず一度つまずきます。MapLibreは`center`もGeoJSONも`[経度, 緯度]`で統一されており、`[緯度, 経度]`のLeafletとは逆です。
### GeoJSONの拠点をcircleレイヤーで描き、クリックでポップアップを出すコード
業務データはAPIからGeoJSONで受け取り、ソースとレイヤーに分けて登録します。Leafletのようにマーカーを1件ずつ作るのではなく、WebGLでまとめて描くため、数万件でも操作が重くなりにくい作りです。
```
map.on('load', () => {
map.addSource('sites', { type: 'geojson', data: '/api/sites.geojson' });
map.addLayer({
id: 'sites', type: 'circle', source: 'sites',
paint: { 'circle-radius': 6, 'circle-color': '#d9480f', 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }
});
map.on('click', 'sites', (e) => {
const f = e.features[0];
new maplibregl.Popup()
.setLngLat(f.geometry.coordinates)
.setText(f.properties.name) // setHTMLは使わず文字列として表示する
.addTo(map);
});
});
```
ポップアップには`setText`を使います。顧客名や備考のように利用者が入力した値を`setHTML`に渡すと、スクリプトを埋め込まれるおそれがあるためです。座標系の変換を含むデータの準備は[GISデータの形式・座標系・取り込み設計](https://www.issoh.co.jp/tech/details/16814/)が参考になります。
## 自前タイル配信の構成：PMTilesとS3・CDNでタイルサーバーを持たない方法
MapLibreを選ぶと、タイルの調達が設計の中心になります。静的タイル・動的タイルなど配信方式の全体像は[Web GISのタイル配信とライブラリ選定](https://www.issoh.co.jp/tech/details/16812/)に譲り、ここではMapLibreと組み合わせる定番の構成に絞ります。
### tippecanoeによる業務データのPMTiles化とaddProtocolの読込手順
[PMTiles](https://github.com/protomaps/PMTiles)は、地図タイルを1つのファイルにまとめる形式です。READMEは、S3のような一般的なストレージに置くだけで、タイル用のバックエンドなしに地図アプリを作れると説明しています。リファレンス実装はBSD-3-Clauseです。
拠点が数十万件あり、GeoJSONを丸ごと送ると重い場合は、[tippecanoe](https://github.com/felt/tippecanoe)でPMTilesに変換します。出力ファイル名を`.pmtiles`にするだけで、この形式で書き出されます。
```
tippecanoe -o sites.pmtiles -l sites -zg --drop-densest-as-needed sites.geojson
pmtiles show sites.pmtiles # ヘッダとメタデータを確認する
```
できたファイルをS3などに置き、ブラウザ側では[PMTilesのMapLibre向け手順](https://docs.protomaps.com/pmtiles/maplibre)どおり`addProtocol`で`pmtiles://`を登録します。npmでビルドする構成の例です。
```
import { Map, addProtocol } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import { Protocol } from 'pmtiles';
const protocol = new Protocol();
addProtocol('pmtiles', protocol.tile); // アプリ全体で1回だけ呼ぶ
const map = new Map({
container: 'map',
center: [139.767, 35.681],
zoom: 10,
style: {
version: 8,
sources: {
gsi: { type: 'raster', tiles: ['https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png'],
tileSize: 256, attribution: '地理院タイル' },
sites: { type: 'vector', url: 'pmtiles://https://tiles.example.com/sites.pmtiles' }
},
layers: [
{ id: 'gsi-pale', type: 'raster', source: 'gsi' },
{ id: 'sites', type: 'circle', source: 'sites', 'source-layer': 'sites',
paint: { 'circle-radius': 4, 'circle-color': '#1971c2' } }
]
}
});
```
`source-layer`には、tippecanoeの`-l`で付けたレイヤー名を書きます。地図画面と別のドメインからファイルを配る場合は、バケット側のCORS設定も合わせて行ってください。
### 背景地図を地理院のベクトルタイルやProtomapsで用意する選択肢
背景もベクタタイルにしたい場合、調達先は主に次の3つです。
| 調達先 | 費用 | 向く場面 | 注意点 |
| ------------------ | ------ | -------- | -------------- |
| 地理院 optimal\_bvmap | 無償 | 国内の業務画面 | 試験公開・URL変更の可能性 |
| Protomaps Basemap | ストレージ代 | 閉域網・海外拠点 | OSMの帰属表示が必須 |
| OpenFreeMap | 無償 | 試作・小規模公開 | SLAなし |
国土地理院の[optimal\_bvmap](https://github.com/gsi-cyberjapan/optimal%5Fbvmap)はPMTiles版が公開されており、READMEにMapLibreでの読み込み例があります。ただし試験公開で、URLや属性の内容が変わりうるという注意書き付きです。[Protomapsの全世界版](https://docs.protomaps.com/basemaps/downloads)は約120GBあり、[pmtiles CLI](https://docs.protomaps.com/pmtiles/cli)の`extract`に`--bbox`と`--maxzoom`を付けて必要な地域だけ切り出してから自社のストレージに置きます。[OpenFreeMap](https://openfreemap.org/)はAPIキー不要・表示回数無制限で商用利用も可としていますが、SLAは提供していません。SLA付きの有償APIが要るなら、MapLibreで描くことを前提にした[Amazon Location Serviceの地図API](https://www.issoh.co.jp/tech/details/7221/)も候補になります。
### PostGISの更新を即時に地図へ出したい場合のMartinによる動的配信
PMTilesはファイルを作り直すまで中身が変わりません。点検結果や車両の位置のように、データベースの更新をその場で地図に反映したい画面には向かない構成です。
この場合はMartinをタイルサーバーとして立て、PostGISのテーブルや関数からタイルを都度生成します。公式サイトはバイナリ・Dockerイメージ・パッケージで導入できると案内しており、同じサーバーからPMTilesやスタイル、フォントも配信できる構成です。更新頻度が1日1回程度なら、夜間バッチでPMTilesを作り直すほうが運用は軽く済みます。
## 5系から6系への移行で書き換えが要る箇所と、既存サンプルが動かない原因
6.0.0は2026年7月22日に公開されました。[v6.0.0のリリースノート](https://github.com/maplibre/maplibre-gl-js/releases/tag/v6.0.0)には破壊的変更が十数件並んでおり、ネット上の5系以前のサンプルはそのままでは動かないものが多くなっています。
### UMD版maplibre-gl.jsの廃止とWebGL2必須化で影響を受ける環境
影響が最も大きいのは配布形態の変更です。グローバル変数`maplibregl`を作るUMD版と、CSP向けの専用ビルドが廃止されました。`