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よりも人気が無い模様。
関連記事
-
-
JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)
JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...
-
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...