MapLibre GL JSの活用例
NICT第13回データ分析・可視化タスクフォース©OpenStreetMap contributors

自己紹介

GIS Enthusiast

井口 奏大
IGUCHI Kanahiro
https://github.com/Kanahiro

https://qiita.com/Kanahiro©Project PLATEAU / MLIT Japan自己紹介

MapLibreコミュニティのVoting Memberです©Project PLATEAU / MLIT Japan自己紹介

FOSS4G 2022 Firenzeに参加
MapLibreコミュニティメンバーと情報交換©Project PLATEAU / MLIT JapanMIERUNEはこんな会社です

み え る ねMIERUNEは位置情報に関する豊富な技術や実績を持つソリューションカンパニーです© 地理院地図 全国最新写真（シームレス）

位置情報は身近なところで使われています

インフラナビ
マーケティ
ング

防災

位置情報データ（GIS）
環境ゲーム
交通© 地理院地図 全国最新写真（シームレス）

事業紹介

QGIS
世界的なOSS-GISソフトウェア⚫ 商用ソフトより使いやすく
多機能⚫ プラグイン開発や講習会
技術コンサルを提供中©Project PLATEAU / MLIT Japan

事業紹介

MapTiler
Google MapsやMapboxから乗り換えませんか⚫ 自由で美しいウェブ地図⚫ 低廉なコストで導入可能⚫ カスタマイズや開発も可能©Project PLATEAU / MLIT Japan

事業紹介

MIERUNE BASE
GISデータ共有サービス⚫ 組織内に散在しているデータを一括で共有⚫ 最新データがすぐわかる⚫ ソフト無しでも閲覧可能©Project PLATEAU / MLIT JapanMIERUNEのソリューション
Leaflet
GeoDjango

DEM

FOSS4G 標高断面図 OpenMapTiles

MapTiler

住所検索
オープンソース

Geoserver

MapLible

Python

気象データ

QGIS 点群

Cesium

ルート検索

LiDAR

可視化 Amazon Location Service
Turf.js
OpenLayers

PLATEAU

deck.gl

MapboxAWS

OpenStreetMap

OSGeo

GTFS 位置情報 3D© 地理院地図 全国最新写真（シームレス）

MIERUNEのソリューション

MIERUNEはMapLibreのサポーターです© 地理院地図 全国最新写真（シームレス）

メッセージ

位置と情報で世界を変える© 地理院地図 全国最新写真（シームレス）目次

01 MapLibre GL JSについて
02 MapLibre GL JSの特色
03 MapLibre GL JSの活用例©OpenStreetMap contributors

01

MapLibre GL JSについて©OpenStreetMap contributors

MapLibre GL JSについて

MapLibre GL JSは、Mapbox GL JSv1.1３からフォークしたオープンソースソフトウェア（OSS)です。

※Mapbox GL JSが、v2.0.0のリリースを機にプロプライエタリライセンスを適用することとなったことによります（それまで3-clause BSD）。OSSライセンスの最終バージョンがv1.13でした。
©Project PLATEAU / MLIT Japan

MapLibre GL JSについて⚫

v2.0.0以降はGL JS自体がMapboxサービスに依存することになりました（ライブラリの利用にAPIキーが必須）©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

ソースコードのフォークにあたっては、FOSS4G・ウェブ地図のエコシステムの一員であるMapTiler社やElastic社のメンバーが中心的役割を担っています。

下記URLでフォーク時のメモがみられる
https://docs.google.com/document/d/1UB8VJ6_vMD9Zxfem7cunwa_G-hXo_ZRY1IeF5iGlh4w/view©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

MapLibre GL JS Timeline

2020-12v1.13.02022-01v2.0.02023-01?
v3.0.0©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

2020-12v1.13.02022-01v2.0.02023-01?
v3.0.0

フォーク後、しばらくはMapbox GL JSから大きく変化がないメンテナンス期間が続いた
v1.15.2まででリリースは4度のみ©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

2020-12v1.13.02022-01v2.0.02023-01?
v3.0.0v2.0.0でTypeScriptへ移行
メンテナー曰く「以降の開発にとって重要な変更だった」©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

今ここ2020-12v1.13.02022-01v2.0.02023-01?
v3.0.0

Mapbox GL JSとは完全に異なるコードベースとなり活発に開発がすすむ
リリース回数20回、最新はv2.4.0（2022-11時点）©Project PLATEAU / MLIT Japan

MapLibre GL JSについて

現在、v3のプレリリースが公開されているが本リリースの時期と内容は不明

2020-12v1.13.02022-01v2.0.02023-01?
v3.0.0©Project PLATEAU / MLIT Japan

MapLibre GL JSについてビッグテックカンパニーからのスポンサードを獲得©Project PLATEAU / MLIT Japan

02

MapLibre GL JSの特色©OpenStreetMap contributors

MapLibre GL JSの特色

MapLibre GL JSはMapbox GL JSのフォークであるため、当時のバージョンであるv1.13の機能を利用することができます。また、現在の最新バージョンであるv2.4まででも機能が追加されています。
v1.13までで実装されていた機能をおさらいしつつ、v2.4で利用できる（＝MapLibre GL JS固有の）機能を紹介します。

©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色

MapLibre GL JS⚫ オープンソースソフトウェア（BSD-3）⚫ WebGLベースの地図ライブラリ⚫ ベクトルタイルに対応⚫ 高度な地図スタイリング（＝デザイン）機能©Project PLATEAU / MLIT JapanMapLibre GL JSの特色

デモサイト
https://demotiles.maplibre.org/©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色

TypeScript⚫ TypeScriptでリライトされた○

Mapbox GL JSはFlowによる型チェック⚫ ビルトインの型定義が利用可能○

Mapbox GL JSはdefinitelyTyped（サードパーティに依存）©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色

Terrain 3D⚫ 3D地形表示機能⚫ 標高データはTerrainRGBを利用可能○

Mapbox社やMapTiler社がサービス提供©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色

addProtocol()⚫ タイルリクエストを自由に改造できる関数○

言い換えると、custom sourceを定義できるようになる。自由度を飛躍的に高めた実装。

○

たとえば地理院標高タイルをTerrainRGBに変換するなど、可能（後述）■https://qiita.com/Kanahiro/items/1e
9c1a4ad6be76b27f0f©Project PLATEAU / MLIT Japan

03

MapLibre GL JSの活用例©OpenStreetMap contributors

MapLibre GL JSの特色

MapTiler
https://cloud.maptiler.com/maps/jp-mierune-streets/©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色
文化財総覧WebGIS
https://heritagemap.nabunken.go.jp/©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色
地理院標高タイル+Terrain 3Dデモ
https://jsbin.com/vonixulezo/edit?html,output©Project PLATEAU / MLIT Japan

MapLibre GL JSの特色
時系列アニメーション
https://github.com/Kanahiro/maplibre-gl-temporal-control
https://kanahiro.github.io/maplibre-gl-temporal-control/raster.html
https://kanahiro.github.io/maplibre-gl-temporal-control/vector.html©Project PLATEAU / MLIT Japanまとめ⚫ MapLibre GL JSはv2.0.0以降、開発が加速⚫ 大きなスポンサードも獲得、今後も継続したメンテナンスが期待される⚫ WebGL・ベクトルタイルによる高パフォーマンス

© 地理院地図 全国最新写真（シームレス）