2026.10.21 業務システム

Leafletとは？v1.9.4の使い方と地理院タイル表示、2.0移行とMapLibreとの選び分け

Leafletは、Webページに拡大・移動できる地図を組み込むためのオープンソースのJavaScriptライブラリです。印刷物の「リーフレット」と同じ綴りですが、この記事で扱うのは地図ライブラリのほうです。2026年10月21日時点の安定版1.9.4を前提に、国土地理院の地図タイルに拠点を重ねるまでのコード、OSM公式タイルを本番で使わない理由、マーカーのクラスタ表示とReact連携の注意点、2.0 alphaで変わる書き方、MapLibre・Mapboxとの選び分けをまとめました。業務システムに地図画面を足す設計や実装を担当する方に向けた内容です。

まとめ：Leafletで足りる業務の地図画面とMapLibre・Mapboxへ回す画面

Leafletが向くのは、背景地図の上に拠点・訪問先・設備の位置を数百〜数千件打ち、クリックで詳細を出す業務画面です。ライブラリは無償のBSD-2-Clauseで、地理院タイルを背景にすれば地図表示の従量課金も発生しません。

逆に、数万件以上の地物を滑らかに描きたい、地図の配色を細かく作り込みたい、3D表示が要るといった画面はMapLibreかMapboxを選びます。Leafletを採るなら、OSM公式タイルを本番の背景に使わないことと、安定版が2023年5月から更新されていない点を保守計画に織り込むことの2点を最初に決めてください。

Leafletの正体：タイル画像を並べて描く軽量なWeb地図ライブラリの構成

Leafletは2011年に公開された地図ライブラリで、公式サイトは「約42KBのJS」で主要な地図機能をそろえると説明しています。開発はGitHubで進んでいます。

地図・レイヤー・コントロールの部品構成とBSD-2-Clauseの許諾範囲

Leafletのコードは、地図本体のL.Map、その上に重ねるL.TileLayerやL.Markerなどのレイヤー、ズームボタンや凡例にあたるコントロールの組み合わせで書きます。各クラスのオプションはAPIリファレンスの1ページにまとまっています。

ライセンスはリポジトリのLICENSEのとおりBSD-2-Clauseで、著作権表示を残せば受託開発の納品物にも組み込めます。表示回数による課金はありません。

背景地図は同梱されず、業務用のタイル配信元を別に選ぶ必要がある理由

Leafletが受け持つのは、地図画像の並べ方と操作だけです。背景の地図画像は「タイル」と呼ばれる256ピクセル四方の画像を外部のサーバーから取得して並べており、ライブラリ自体には1枚も入っていません。

ライブラリが無償でも、使える範囲はタイル配信元の利用規約と料金で決まります。配信方式全体の比較はWeb GISのタイル配信とライブラリ選定に譲り、この記事ではLeafletで実際に使う配信元に絞ります。

Leaflet 1.9.4をCDNで読み込み、地理院タイルに拠点を重ねる手順

ここからは、ビルド環境なしで動くCDN版を使い、国土地理院の地図を背景に拠点を表示するところまでを書きます。手順の骨格は公式のQuick Startガイドに沿っています。

SRIハッシュ付きのCDN読み込みと地図コンテナの高さ指定の手順

CSSを先に、JSを後に読み込みます。integrity属性の値は、2026年10月21日にunpkgから取得したファイルのSHA-256と公式ガイドの記載が一致することを確かめたものです。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<div id="map" style="height: 480px;"></div>

地図が出ない原因で多いのは、divに高さが無いことです。公式ガイドも高さの指定を明記しています。タブやモーダルの中に置く場合は、表示後にmap.invalidateSize()を呼ばないとタイルが欠けます。

地理院タイルの標準地図・淡色地図を背景にする設定と出典表示の方法

国内の業務システムなら、背景には国土地理院の地理院タイルが扱いやすい選択です。地理院タイル一覧によると、Webサイトやアプリでリアルタイムに読み込む利用は出典の明示だけで申請不要です。

<script>
  const map = L.map('map').setView([35.681, 139.767], 13); // [緯度, 経度]（東京駅付近）
  L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
    minZoom: 5,
    maxZoom: 18,
    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>'
  }).addTo(map);
</script>

URLのpaleをstdに替えると標準地図です。業務データを重ねるなら、色数の少ない淡色地図のほうがマーカーが埋もれません。一覧上の日本全国の提供範囲はズームレベル5〜18で、minZoomとmaxZoomを合わせておけば、タイルの無い縮尺で灰色の画面が出る事故を防げます。

GeoJSONの拠点データをL.geoJSONで描き、ポップアップを出すコード

業務データはAPIからGeoJSONで受け取り、L.geoJSONに渡すのが素直な作りです。

const branches = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: '本社' },
      geometry: { type: 'Point', coordinates: [139.767, 35.681] } },
    { type: 'Feature', properties: { name: '品川倉庫' },
      geometry: { type: 'Point', coordinates: [139.740, 35.628] } }
  ]
};
L.geoJSON(branches, {
  onEachFeature: (feature, layer) => {
    layer.bindPopup(feature.properties.name); // 文字列はHTMLとして解釈される
  }
}).addTo(map);

座標の順序に注意してください。setViewやL.markerは[緯度, 経度]、GeoJSONのcoordinatesは[経度, 緯度]です。手で座標を書き写すと逆にしやすく、拠点が海の上に出たらまずここを疑います。

もう1点、bindPopupに渡した文字列はHTMLとして描画されます。顧客名や備考など利用者が入力した値をそのまま渡すとスクリプトを埋め込まれるおそれがあるため、エスケープしてから渡すか、textContentで組み立てたDOM要素を渡す実装が必要です。座標系の変換を含むデータ準備はGISデータの形式・座標系・取り込み設計が参考になります。

タイル配信元の選び方：OSM公式タイル・地理院タイル・商用タイルの利用条件

公式ガイドのサンプルはOpenStreetMap（OSM）のタイルです。本番では配信元を選び直します。

OSM公式タイルを業務システムの本番で使わない、利用規約上の理由

tile.openstreetmap.orgは寄付で運営されている共用サーバーで、OSM財団のタイル利用規約は可用性を「best-effort」とし、SLAは無いと明記しています。重い利用は予告なく遮断されることがあり、商用サービスについては「いつでもアクセスを取り消しうる」とまで書かれています。

規約は、OSMの著作権表示を地図上に見える形で出すこと、Refererヘッダを送ること、表示していない範囲の先読みやオフライン保存をしないことも求めています。現場端末に地図を事前保存したい業務アプリは、この時点で候補から外れます。

地理院タイル・商用タイル・自前配信を業務の利用規模で選ぶ目安一覧

背景タイルの調達先は、主に次の4つから選びます。

配信元	費用	向く場面	注意点
地理院タイル	無償	国内の業務画面全般	出典表示が必須・海外は縮尺8まで
OSM公式タイル	無償	試作・検証	SLAなし・遮断の可能性
商用タイル（MapTiler等）	従量・月額	海外拠点を含む画面	表示回数の上限と単価
自前配信	サーバー・CDN代	閉域網・オフライン端末	タイル生成と更新の運用

国内拠点だけなら地理院タイル、海外拠点が混ざるなら商用タイル、閉域網なら自前配信と考えれば足ります。切り替えはL.tileLayerのURLと出典表示の書き換えだけなので、試作を地理院タイルで始めても手戻りはほぼ出ません。

業務システムに組み込むときのプラグインとReact連携の実装上の注意

足りない機能は公式のプラグイン一覧の拡張で補います。業務画面でまず要るのはクラスタ表示とReact連携です。

数千件の拠点をLeaflet.markerclusterでまとめ、描画負荷を抑える方法

マーカーを数千件そのまま置くと、縮小表示で画面が埋まり、ブラウザの動作も重くなります。プラグイン一覧で「Recommended!」と付いているLeaflet.markercluster（2026年10月時点の最新1.5.3・MIT）を使うと、近い位置のマーカーを件数付きの円にまとめて表示できます。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script>
  const cluster = L.markerClusterGroup({ chunkedLoading: true });
  const markers = sites.map(s => L.marker([s.lat, s.lng]).bindPopup(s.name));
  cluster.addLayers(markers); // 1件ずつaddLayerせず配列でまとめて追加する
  map.addLayer(cluster);
</script>

addLayersでの一括追加とchunkedLoadingによる分割処理で、画面が固まりにくくなります。数万件を超える規模は、WebGLで描くMapLibreに移すほうが筋のよい対処です。

React Leaflet 5のReact 19・Leaflet 1.9系要件と利用条件

ReactでLeafletを使う定番はReact Leafletです。npm registryの5.0.0の依存条件はreactとreact-domが^19.0.0、leafletが^1.9.0で、React 18のままの既存システムには入りません。Leaflet 2.0系とも組み合わせられない点も押さえておきます。TypeScriptでは@types/leafletを別途入れます。

見落としやすいのがライセンスです。React LeafletはLICENSE.mdのとおりHippocratic License 2.1で、人権原則に沿った利用を条件とする条項と仲裁条項を含みます。OSSライセンスの許可リストを運用する顧客の案件では、法務確認を通すか、useEffectとuseRefでLeafletを直接初期化する薄いラッパーを自作するほうが安全です。画面設計全体のライブラリ選定は業務システムの画面デザインとライブラリ選定で整理しています。

Leaflet 2.0 alphaの破壊的変更と、1.9.4のまま使い続けるか判断する材料

2.0は2025年5月18日に最初のアルファ版、8月16日に2.0.0-alpha.1が出ました。公式の告知記事を読む限り、既存コードの書き換えが前提の改版です。

ESM化とファクトリ関数廃止で書き換えが要る既存コードの具体例

2.0ではESモジュールとして配布され、グローバル変数LとL.map()のような小文字のファクトリ関数がなくなります。クラスを個別にimportしてnewで生成する形に変わります。

// 1.9系の書き方
const map = L.map('map').setView([35.681, 139.767], 13);
L.circle([35.681, 139.767], 500).addTo(map);

// 2.0系の書き方（npm install [email protected]）
import { Map, TileLayer, Circle } from 'leaflet';
const map = new Map('map').setView([35.681, 139.767], 13);
new Circle([35.681, 139.767], { radius: 500 }).addTo(map); // 半径を第2引数に渡す形は廃止

ほかにもInternet Explorer対応の終了、Pointer Eventsへの移行に伴うmouseEventToLatLngからpointerEventToLatLngへの改名などが告知されています。後方互換用のleaflet-global.jsは残りますが、1.x向けプラグインが動く保証はありません。

2023年5月から安定版が止まっている状態を業務システムでどう扱うか

npm registryでは、安定版の最新は2023年5月18日公開の1.9.4のままです。2.0は2026年10月21日時点でもalphaの段階で、本番の業務システムに入れる版ではありません。

新規案件も1.9.4で組み、2.0の正式版が出たらプラグインの対応状況を見て移行する判断で問題ありません。ただし保守期間が5年を超えるシステムでは、更新が止まったライブラリを抱える説明責任が生じます。更新頻度の高いMapLibreと比べる論点はWeb GISの記事のライブラリ選定章で詳しく扱っています。

Leaflet・MapLibre・Mapboxの業務別選定基準とLeafletの見送り条件

3つはどれもWeb地図を描くライブラリですが、描画方式とライセンスが違い、それが向く画面の違いになります。

業務向けの描画方式・ライセンス・費用で比べる3ライブラリの比較表

2026年10月21日時点のnpm registryの最新版とライセンス表記で並べると、次のとおりです。

項目	Leaflet	MapLibre GL JS	Mapbox GL JS
最新安定版	1.9.4	6.15.0	3.33.0
ライセンス	BSD-2-Clause	BSD-3-Clause	Mapbox利用規約
主な描画方式	ラスタタイル・SVG/Canvas	ベクタタイル・WebGL	ベクタタイル・WebGL
ライブラリ費用	無償	無償	月5万ロード超で従量課金
背景タイル	別途調達	別途調達	Mapboxが提供

Leafletの強みは、コードの短さと学習の速さ、それに地理院タイルのようなラスタタイルとの相性です。MapLibreとMapboxは、配色をスタイル定義で変えられる点と大量の地物をGPUで描ける点で上回ります。Mapboxの料金とライセンスの詳細はMapboxの料金・ライセンスとGL JSの実装手順にまとめています。

Leafletを採用する条件と、MapLibreやMapboxへ切り替える場面

Leafletを採用するのは、背景が国内の地理院タイルで足り、重ねる地物が数千件程度まで、地図の見た目は標準のままでよい画面です。営業の訪問先マップ、設備・施設の点検地図、配送拠点の一覧画面などが当てはまり、車両の現在地を一定間隔で更新する動態管理システムの地図画面も多くはこの範囲に収まります。

見送るのは、地物が数万件を超える画面、道路の色やラベルを作り込みたい画面、3D表示や地図の回転が要る画面です。プラグインを重ねて無理に対応すると、描画の重さと相性問題で保守が苦しくなるため、初めからMapLibreかMapboxを選んでください。地図を組み込んだ業務アプリの要件整理から開発・運用までを外部に任せたい場合は、業務用・Webアプリ開発のサービスページで対応範囲を確認できます。

よくある質問

Leafletの導入を検討する段階で、よく寄せられる疑問に答えます。

Leafletは無料で商用利用できますか？

ライブラリ自体はBSD-2-Clauseで、著作権表示とライセンス文を残せば商用のシステムにも無料で組み込めます。費用がかかりうるのは背景地図のタイルのほうです。地理院タイルは出典の明示で無償利用でき、商用タイルは事業者の料金に従います。周辺プラグインはライセンスが個別に異なるため、納品前に1本ずつ確認してください。

LeafletとOpenLayersはどちらを選ぶべきですか？

点を打つ画面ならLeaflet、GISの機能が要るならOpenLayersです。OpenLayersは2026年10月時点のnpm最新が10.11.0で、ライセンスはBSD-2-Clauseです。座標系の変換やWMS・WFSなどOGC標準の地図サービスとの接続を標準機能で扱える反面、APIが多く習得に時間がかかります。自治体のGISデータを重ねる案件ならOpenLayersを検討してください。

Leafletで日本語の地図を表示できますか？

表示できます。Leafletは受け取ったタイル画像をそのまま並べるため、地図上の文字の言語を決めるのはタイル配信元です。地理院タイルの標準地図や淡色地図を背景にすれば、地名や施設名は日本語で表示されます。ズームボタンの英語のツールチップは、L.control.zoomのzoomInTitleオプションなどで日本語に差し替えられます。

Leafletはオフライン環境で使えますか？

ライブラリはnpmやファイルで社内に置けるので、オフラインでも動作します。問題は背景タイルで、OSM公式タイルの利用規約ではオフライン保存は禁止です。現場端末や閉域網では、必要な範囲のタイルを自前で生成して社内サーバーから配信します。地理院タイルをリアルタイム読み込み以外の形で使う場合、基本測量成果にあたるタイルは測量法に基づく申請が必要になることがあるため、地理院タイル一覧の注意書きを事前に確認してください。

Leafletでベクタタイルは扱えますか？

本体はラスタタイル前提ですが、プラグインで扱えます。公式のプラグイン一覧には、Leaflet.VectorGridやmaplibre-gl-leaflet、protomaps-leafletなどがベクタタイル用として掲載されています。ただし、ベクタタイルが主役ならMapLibre GL JSを直接選ぶほうが描画性能でもスタイルの自由度でも有利で、プラグインは既存のLeaflet画面に一部だけ足す移行途中の場面に限るのが現実的です。