JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS」というJSライブラリが使われており、見たことの無い名前だったので調べたところLeafletのような地図系のライブラリの模様。簡単な使い方のソースコードとLeafletとの比較を以下にメモ。
目次 [非表示]
MapLibre GL JS
公式サイト
ドキュメント
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よりも人気が無い模様。
関連記事
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法
あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...