WebGIS とは？ Leaflet、MapLibre、OpenLayers 比較
インターネット上で様々な地理情報を表示するシステムを WebGIS と呼びますが、それをフロントエンド（JavaScript）で実現するライブラリを紹介します。
Contents
WebGIS とは
GIS（Geographic Information System：ジーアイエス）とは、コンピュータ上で様々な地理情報を表示するシステムのことを指します。具体的にはマップタイルの上にレイヤーやオブジェクト（マーカーやポリゴンなど）を重ね合わせて表示していく形のものが多い印象ですが、地理情報を管理・加工し、視覚的に表示する技術全般を指しています。
その中でも、WebGIS（ウェブジーアイエス）とは、インターネット上で利用可能な GIS のことです。有名なものでは Google Map や地理院地図などが挙げられます。インターネットを介し、スマートフォンやデスクトップ端末（アプリやブラウザなど）で地理情報を表示させる技術全般を WebGIS と呼んでいます。
上述のように、WebGIS には様々な形がありますが、以下取り上げるのはブラウザ上で表示させる WebGIS です。ブラウザ上での地理データの表示はフロントエンド側が担うことが多く、より具体的には JavaScript を用いて地理データを表示させるケースが一般的です。以下、JavaScript を用いた地理データの表示を助ける地図ライブラリ、Leaflet、MapLibre、OpenLayers について説明していきます。
地図ライブラリの紹介
以下では、Leaflet、MapLibre、OpenLayers について説明します。なお、これらのライブラリは地図を表示するためのものであって、地図そのもの（マップタイル）を提供するものではない点、ご注意ください。フリーのマップタイルには国土地理院が提供するものや OpenStreetMap 等があり、これらとライブラリを組み合わせて使用する必要があります。
Leaflet
Leaflet（リーフレット）は Mapbox と並んで、最も使われている地図ライブラリです。下図は地図ライブラリの npm トレンド（≒インストール数）比較ですが、現在でも根強い人気を誇っていることが分かります。比較的簡単なコードで、マーカーやポリゴンの描画など基本的なニーズには大体応えられるようになっています。プラグインも充実しているため、学習コストは他のライブラリと比較すると低く、JavaScript 入門者でも実装が容易です。
気になる点を挙げるとすると、Leaflet は基本的に Vladimir Agafonkin 氏によって個人開発されているため、今後のアップデートに不安が残ることです。Vladimir Agafonkin 氏はウクライナのキーウを拠点にしているそうで、ロシアーウクライナ戦争の影響も受けているようです。日付変更線をまたぐ図形の描画に課題があることも、個人的には Leaflet の気になる点の一つです。
MapLibre
MapLibre（マップリブレ）は近年急速に成長している地図ライブラリです。もともと Mapbox が提供する Mapbox GL JS のバージョン 1.13 が前身となるのですが、2020年12月、Mapbox GL JS がバージョン 2.0 にアップデートするときに、Mapbox はオープンソースで開発することを辞め、独自で開発し、従量課金制でサービスを提供する方針に切り替えました。これに伴って、Mapbox GL JS とは別のオープンソースプロジェクトとして MapLibre が生まれました。その為、MapLibre のコードは Mapbox と共通する点も多いです。
近年急速に普及したベクトルタイルを前提としている点や（ラスタタイルも使えます）、Terrain 3D 対応/Globe表示対応などの開発が積極的に続いている点などが良いところかなと思います。個人的にはズームイベントを付けなくても、ズームレベルごとに自動で見やすい表示にしてくれる点もポイントが高いです。
OpenLayers
OpenLayers（オープンレイヤーズ）は、MetaCarta 社がベースを開発し、2006 年にオープンソースソフトウェアとしてリリースしたライブラリになります。2007 年より OSGeo 財団のプロジェクトになっています。Leaflet が 2011 年、MapLibre が 2020 年公開を考えると、老舗のオープンソース地図ライブラリといえます。JavaScript に慣れた方ならば、色々と自分でカスタマイズできる、自由度の高いライブラリです。
現在では OpenLayers9 (ver 9.2.4) まで公開されていますが、例えば2系と3系でコードの書き方が少し違ったりするので、あまり古いネットの情報は参考にできないことが注意点です（しかも頻繁にアップデートされます）。仮に Leaflet が入門者向けとするならば（それでもかなり色々な操作ができますが）、OpenLayers は少し上級者向けといえるかもしれません。
三者の簡単な比較
色々使ってみた個人的な感覚は、
- ソースコードを書く容易さ： Leaflet >> MapLibre > OpenLayers
- カスタマイズの自由度：MapLibre > OpenLayers > Leaflet
という感じです。ここでカスタマイズの自由度は、色々な GIS データに対応していたり、色々な表示形式に対応していたりするか、という点でランク付けしました。Leaflet にはプラグインがたくさんあるので、地図の魅せ方という意味では順位が変わるかもしれません。
独断と偏見ですが、オープンソースの地図ライブラリという意味では、勢いとカスタマイズの自由度がある MapLibre がおすすめかなと思います。npm トレンド比較（上図）からも、2024 年現在 MapLibre が OpenLayers を抜きつつあり、今後も普及が進んでいきそうです。
具体的なコード比較
具体的なコードを見た方が使用イメージがわくと思いますので、地理院タイルを表示して、マーカーをセットするシンプルなサンプルコードを並べます。
Leaflet
Leflet の本文は関数 init_map() の中身だけなのでわずか６行です。かなり簡単なコードでブラウザで地図を表示できることが分かります。基本的に手続き型なので理解もしやすいです。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<script>
function init_map() {
const map = L.map('mapcontainer');
map.setView([35.301, 136.138], 5);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>"}).addTo(map);
L.marker([35.301, 136.138]).addTo(map);
}
window.addEventListener('DOMContentLoaded', init_map());
</script>
MapLibre
MapLibre はベクトルタイルを前提としているため、ここでもベクトルタイルを使用します（ラスタタイルも使用可能です）。ベクトルタイルなので、前項の Leaflet と比較してズームレベルが -1 になっています。座標表示が Leaflet だと [緯度, 経度] ですが、MapLibre だと [経度, 緯度] となっている点も注目ポイントです。
ちなみに、マーカーのクリックイベントはポップアップが登録してあるため、マーカーにクリックイベントを付加しようと思うと、マーカークラスをオーバーライドする必要があります。ここらへんはやっぱり Leaflet の方が簡単に実装できます。
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl/dist/maplibre-gl.js'></script>
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<script>
function init_map() {
const map = new maplibregl.Map({
container: 'mapcontainer',
style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
center: [136.138, 35.301],
zoom: 4,
pitch: 0
});
const marker = new maplibregl.Marker().setLngLat([136.138, 35.301]).addTo(map);
}
window.addEventListener('DOMContentLoaded', init_map());
</script>
OpenLayers
OpenLayers のコードは、他の二つに比べて少し長くなっています。ここでは、マーカーの座標情報を持つ ol.Feature と、見た目を管理する ol.style.Style を定義して、新たなレイヤーにセット、作成したレイヤーを地図に追加する、という手順を踏んでいます。ここらへんの流れも、慣れるまでは少し大変です。
<script src="https://cdn.jsdelivr.net/npm/ol@v9.2.4/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v9.2.4/ol.css">
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<script>
function init_map() {
const map = new ol.Map({
target: 'mapcontainer',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>",
url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([136.138, 35.301]),
zoom: 5
})
});
const markerFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([136.138, 35.301]))
});
const markerStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/latest/examples/data/icon.png'
})
});
const markerLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [markerFeature]
}),
style: markerStyle
});
map.addLayer(markerLayer);
}
window.addEventListener('DOMContentLoaded', init_map());
</script>
以上、ソースコードの長さが Leaflet < MapLibre < OpenLayers となっていることが何となく感じていただけたかなと思います。
まとめ
インターネット上で様々な地理情報を表示するシステム全般を WebGIS と呼びますが、特にブラウザでの地理データの表示に限り、オープンソースの JavaScript 地図ライブラリを比較してみました。どのライブラリも特徴はありますが、個人的には MapLibre がバランスがとれていておすすめです。しかし簡単なカスタマイズなら Leaflet でも十分、といったケースもあるでしょう。
WebGIS は JavaScript ライブラリの他にも、デスクトップアプリの QGIS や、Android 用のライブラリ osmdoid など、様々なものが存在します。自分の目的に合ったツールをうまく選択していくことが重要なのかなと思います。
少し宣伝
当サイトは MapLibre を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。データに基づく地図表示という意味では、WebGIS といえなくもないです。
当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！ また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。
このページが皆様の GIS ライフの一助となりますことをお祈りいたします
パントレ開発部