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の公式サイトに並ぶ複数のプロジェクトと、それを開発するコミュニティの総称です。
2020年12月のMapbox GL JS v2ライセンス変更とフォークに至った経緯
MapLibre GL JSのREADMEは、Mapboxが2020年12月に非OSSライセンスへ切り替えたことを分岐の契機と説明しています。現在のMapbox GL JSのLICENSE.txtは、v2以降の利用を「関連するMapbox製品との併用のみ」に限り、Mapboxアカウントが失効するとライセンスも自動で終わると定めています。
MapLibreはこの変更前の1.13系を引き継ぎ、npmでは2020年12月10日にmaplibre-glの1.13.0-rc.1が公開されました。ライセンスはLICENSE.txtのとおりBSD-3-Clauseで、他社のタイルや自前のタイルと自由に組み合わせられます。Mapbox側の料金とライセンスの細部はMapboxの料金・ライセンスとGL JSの実装手順で整理しています。
GL JS・Native・Style Spec・Martinの開発対象と役割分担
業務システムで関わるのは、主に次の4つです。
- MapLibre GL JS：ブラウザでベクタタイルをWebGLで描くTypeScript製ライブラリ。この記事の中心
- MapLibre Native：Android・iOS・デスクトップ向けのC++製ライブラリ。OpenGL・Metal・Vulkanで描画
- MapLibre Style Specification：どのデータをどの順番・色で描くかを書くJSONの仕様
- Martin：PostGISやPMTilesからベクタタイルを配信するRust製のタイルサーバー
Webの地図画面を作るだけなら、GL JSとStyle Specificationの2つを押さえれば足ります。同じスタイルJSONをWebとスマホアプリの両方で使える点が、Leafletに無い強みです。
MapLibre GL JS 6.16をCDNで読み込み、地理院タイルに拠点を重ねる手順
ここでは、ビルド環境なしで動くCDN版を使い、国土地理院の淡色地図の上に拠点を描くところまでを書きます。骨格は公式ドキュメントのQuickstartに沿っています。
ESM専用になった6系のmodule読み込みと地図コンテナの準備手順
6系から配布物はESモジュールだけになり、<script type="module">の中でimportします。2026年11月1日にunpkgで確かめたところ、6.16.0のdist/maplibre-gl.mjsは存在し、5系までのdist/maplibre-gl.jsは404でした。
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css">
<div id="map" style="height: 480px;"></div>
<script type="module">
import * as maplibregl from 'https://unpkg.com/[email protected]/dist/maplibre-gl.mjs';
// 以降のコードはこの中に書く
</script>公式のサンプルは@^6.16.0と範囲指定で読み込みますが、業務システムでは版を固定しておくほうが安全です。週1回前後の頻度で新版が出ており、2026年10月だけでも6.12.0から6.16.0まで5回更新されています。
スタイルJSONで地理院の淡色地図を背景にし、出典表示を入れる設定
MapLibreは背景地図を同梱していません。styleにスタイルJSONを渡し、その中でタイルの取得先を指定します。地理院タイル一覧によると、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: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
}
},
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データの形式・座標系・取り込み設計が参考になります。
自前タイル配信の構成：PMTilesとS3・CDNでタイルサーバーを持たない方法
MapLibreを選ぶと、タイルの調達が設計の中心になります。静的タイル・動的タイルなど配信方式の全体像はWeb GISのタイル配信とライブラリ選定に譲り、ここではMapLibreと組み合わせる定番の構成に絞ります。
tippecanoeによる業務データのPMTiles化とaddProtocolの読込手順
PMTilesは、地図タイルを1つのファイルにまとめる形式です。READMEは、S3のような一般的なストレージに置くだけで、タイル用のバックエンドなしに地図アプリを作れると説明しています。リファレンス実装はBSD-3-Clauseです。
拠点が数十万件あり、GeoJSONを丸ごと送ると重い場合は、tippecanoeでPMTilesに変換します。出力ファイル名を.pmtilesにするだけで、この形式で書き出されます。
tippecanoe -o sites.pmtiles -l sites -zg --drop-densest-as-needed sites.geojson
pmtiles show sites.pmtiles # ヘッダとメタデータを確認するできたファイルをS3などに置き、ブラウザ側では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はPMTiles版が公開されており、READMEにMapLibreでの読み込み例があります。ただし試験公開で、URLや属性の内容が変わりうるという注意書き付きです。Protomapsの全世界版は約120GBあり、pmtiles CLIのextractに--bboxと--maxzoomを付けて必要な地域だけ切り出してから自社のストレージに置きます。OpenFreeMapはAPIキー不要・表示回数無制限で商用利用も可としていますが、SLAは提供していません。SLA付きの有償APIが要るなら、MapLibreで描くことを前提にしたAmazon Location Serviceの地図APIも候補になります。
PostGISの更新を即時に地図へ出したい場合のMartinによる動的配信
PMTilesはファイルを作り直すまで中身が変わりません。点検結果や車両の位置のように、データベースの更新をその場で地図に反映したい画面には向かない構成です。
この場合はMartinをタイルサーバーとして立て、PostGISのテーブルや関数からタイルを都度生成します。公式サイトはバイナリ・Dockerイメージ・パッケージで導入できると案内しており、同じサーバーからPMTilesやスタイル、フォントも配信できる構成です。更新頻度が1日1回程度なら、夜間バッチでPMTilesを作り直すほうが運用は軽く済みます。
5系から6系への移行で書き換えが要る箇所と、既存サンプルが動かない原因
6.0.0は2026年7月22日に公開されました。v6.0.0のリリースノートには破壊的変更が十数件並んでおり、ネット上の5系以前のサンプルはそのままでは動かないものが多くなっています。
UMD版maplibre-gl.jsの廃止とWebGL2必須化で影響を受ける環境
影響が最も大きいのは配布形態の変更です。グローバル変数maplibreglを作るUMD版と、CSP向けの専用ビルドが廃止されました。<script src>で読み込む旧来の書き方は、前述のtype="module"か、npmとバンドラーでの読み込みに書き換えます。
次がWebGL1の廃止で、WebGL2が使えない端末では地図が表示されません。古い業務端末やリモートデスクトップ経由の画面では、GPUの機能が制限されてWebGL2が無効のことがあります。導入前に対象端末で表示を確かめ、描画できないときに出るエラーをmap.on('error')で受けて代替表示を出す作りにしておくと、問い合わせが減ります。
setDataの戻り値廃止やレガシー式のエラー化に伴うコード修正
コード側で修正が要る変更は次のとおりです。影響の出やすい順に並べます。
GeoJSONSource.setDataの第2引数と戻り値が廃止。更新完了を待つ処理を書いていた箇所は作り直しになる- スタイル仕様v25への更新で、旧形式の式（レガシー式）が警告ではなくエラーになる。古いスタイルJSONを流用している画面はここで止まる
styleimagemissingイベントが通知専用になり、不足画像の供給はMap.setMissingStyleImageResolverで行う- TypeScriptの出力ターゲットがES2022になり、古いビルド環境では変換設定の見直しが要る
実務では、まず1と2だけを確認すれば移行の工数が読めます。業務システムでは、地図データを定期的に更新する処理にsetDataを使っていることが多いためです。
MapLibre・Mapbox・Leafletの業務での選定基準と採用を見送る条件
3つの違いは、描画方式とライセンス、それに「タイルを誰が用意するか」に集約されます。
描画方式・ライセンス・タイル調達の負担で比べる3ライブラリの一覧
2026年11月1日時点のnpm registryの最新版とライセンス表記で並べると、次のとおりです。
| 項目 | MapLibre GL JS | Mapbox GL JS | Leaflet |
|---|---|---|---|
| 最新安定版 | 6.16.0 | 3.34.1 | 1.9.4 |
| ライセンス | BSD-3-Clause | Mapbox利用規約 | BSD-2-Clause |
| 主な描画方式 | ベクタタイル・WebGL2 | ベクタタイル・WebGL | ラスタタイル・SVG/Canvas |
| ライブラリ費用 | 無償 | 月5万ロード超で従量課金 | 無償 |
| 背景タイル | 別途調達 | Mapboxが提供 | 別途調達 |
MapLibreはMapboxと同じ描画の仕組みを、費用と規約の縛りなしで使える選択肢です。その代わり、タイルの調達と運用の責任を自社か開発会社が負います。Leafletとの違いはLeafletの使い方とMapLibreとの選び分けでLeaflet側から整理しています。
MapLibreを採用する条件と、MapboxやLeafletに任せたほうがよい場面
MapLibreを採用するのは、次のどれかに当てはまる案件です。重ねる地物が数万件を超える。配色やラベルを業務に合わせて作り込みたい。閉域網で外部の地図APIに出られない。月間の地図表示が多く、Mapboxの従量課金が予算を圧迫する。物流の配送状況や設備の稼働状況を広域で一覧する画面が典型です。
見送るのは2つの場面です。1つは、タイル配信やスタイルの保守を引き受ける体制が無く、表示回数も月5万回に収まる案件で、この場合はMapboxに任せるほうが安く済みます。もう1つは、点を数千件打つだけで地図の見た目は標準のままでよい画面で、Leafletのほうがコードも短く、WebGL2の端末条件も気にせずに済む選択肢です。地図を組み込んだ業務アプリの要件整理から開発・運用までを外部に任せたい場合は、業務用・Webアプリ開発のサービスページで対応範囲を確認できます。
よくある質問
MapLibreの導入を検討する段階で、よく挙がる疑問に答えます。
MapLibreは無料で商用利用できますか？
MapLibre GL JSはBSD-3-Clauseで、著作権表示とライセンス文を残せば商用のシステムにも無料で組み込めます。Mapboxのようなロード数の課金もありません。費用が出るのは背景タイルの側です。地理院タイルは出典の明示で無償、自前のPMTilesはストレージと転送量の費用、商用の地図APIは事業者の料金に従います。OSM由来のタイルを使う場合は、OpenStreetMapへの帰属表示も必要です。
Mapbox GL JSのコードはMapLibreにそのまま移せますか？
1系のコードなら、ほぼ置き換えで動きます。READMEでも、初期のMapLibreは1系の代替として作られたと説明しています。mapboxglをmaplibreglに書き換え、Mapboxのスタイル（mapbox://で始まるURL）を自前か他社のスタイルに差し替えるのが主な作業です。v2以降の独自機能を使ったコードやMapboxのタイル・API前提の画面は、置き換えではなく作り直しと考えてください。
ReactやVueでMapLibreを使うにはどうすればよいですか？
Reactならreact-map-glが定番です。2026年11月時点の8.1.3はMITライセンスで、MapLibre専用の@vis.gl/react-maplibreも同じ版で公開されており、依存条件としてmaplibre-gl 4.0.0以上が指定されています。Vueでは、onMountedでnew Map()を作りonUnmountedでmap.remove()を呼ぶ薄いラッパーを自作する構成で十分です。画面遷移のたびに地図を作り直さない設計にしておくと、メモリの増加を防げます。
MapLibreはオフラインや閉域網でも使えますか？
オフラインや閉域網でも利用可能です。ライブラリはnpmで社内に置き、背景タイルは必要な地域を切り出したPMTilesを社内のWebサーバーに置けば、外部への通信なしで地図が表示できます。注意したいのは、スタイルJSONが参照するフォント（グリフ）やアイコン（スプライト）のURLです。外部を向いたままだと、地図は出てもラベルが表示されません。これらも社内に置き、スタイル内のURLを書き換えてください。
スマートフォンアプリでもMapLibreは使えますか？
使えます。AndroidとiOSにはMapLibre Nativeがあり、Web版と同じスタイル仕様のJSONで地図を描画できる構成です。業務アプリでWeb管理画面とスマホアプリの両方に地図を出す場合、配色やレイヤー定義を1つのスタイルJSONで共有できるため、見た目のずれが起きにくくなります。描画はOpenGL・Metal・Vulkanに対応しています。
関連記事
- GISとは？地理情報システムの仕組み・種類と業務システムへの組み込み判断：地図を業務システムに組み込むかどうかを決める前提知識です
- Web GISとは？タイル配信とベクタタイル・ライブラリ選定を実装目線で解説：MapLibreを含むWeb地図の4層構成と配信方式を整理しています
- Mapboxとは？料金・ライセンスとGL JS v3の実装手順、Google Mapsとの選び分け：MapLibreの分岐元と、タイル込みで任せる場合の費用を比べられます
- Leafletとは？v1.9.4の使い方と地理院タイル表示、2.0移行とMapLibreとの選び分け：ラスタタイル中心の軽い地図画面で足りるかを判断できます
- Amazon Location Serviceとは？料金・APIキーの使い方・日本での制約とGoogle Mapsとの違い：MapLibreで描く前提の有償地図APIとして検討できます
