JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法

あるサイトをWappalyzerで調査していた際に「MapLibre GL JS」というJSライブラリが使われており、見たことの無い名前だったので調べたところLeafletのような地図系のライブラリの模様。簡単な使い方のソースコードとLeafletとの比較を以下にメモ。

MapLibre GL JS

公式サイト

https://maplibre.org/

ドキュメント

https://maplibre.org/maplibre-gl-js/docs/

CDN

CDNで使う場合は以下を記述する。

<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">

サンプル

https://taitan916.info/sample/MapLibre_GL_JS/

ソースコード

<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
<script>
const position = [139.767125, 35.681236];
const map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'raster-tiles': {
                type: 'raster',
                tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '© OpenStreetMap contributors'
            }
        },
        layers: [{
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
        }]
    },
    center: position,
    zoom: 15
});
const popup = new maplibregl.Popup({
    offset: 25,
    closeButton: false,
}).setText('マーカー');

const marker = new maplibregl.Marker().setLngLat(position).setPopup(popup).addTo(map);
</script>

Leafletとの比較

描写方法が異なる

LeafletはCanvas、MapLibre GL JSはWebGLで描写している。

WebGLの方がパフォーマンスが良いらしく、こちらのサイトによるとマップポイントの描写がLeafletだと10万件で表示されなくなるが、MapLibre GL JSのだと45万件でも表示されるとのこと。

そのためマーカーを大量に設置する必要がある場合等だとLeafletよりMapLibre GL JSの方が良さそう。

Leafletより情報量が少な目

Google検索した場合にLeafletより情報量が少なく感じた。また、こちらのサイトによるとLeafletよりも人気が無い模様。