勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

あるサイトを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よりも人気が無い模様。

 - JavaScript

  関連記事

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...

JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法

PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...

JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について

JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...