本業

　SIer システムエンジニア

​

副業

　スタートアップ企業 フロントエンドエンジニア

　大手企業 GISエンジニア

​

所属コミュニティ

　OSGeo日本支部　理事

​

目次

MapLibre GL JSとは？

普及活動の動機

普及活動の内容

初心者がつまずきやすいポイント

まとめ

MapLibre GL JSとは？

MapLibre とは

オープンソースの

地図ライブラリ群

• MapLibre GL JS
• MapLibre Native
• MapLibre RS などなど・・

出典: MapLibre

MapLibre GL JSとは

JavaScript/TypeScript用ライブラリ

​

mapbox-gl-jsのオープンソースフォークとして誕生

出典: MapLibre

MapLibre GL JSの特徴

• ベクトルタイルを表示できる
• MapLibreスタイルから地図を表示できる
• WebGLを使った高速な描画が可能

出典: MapLibre

他の地図ライブラリ

• Leaflet
• 軽量で初心者でも使いやすい
• OpenLayers
• 投影法の指定やタイルの切り出しなど高機能なことができる
• CesiumJS
• 3D地球儀や3D地物を表示することができる
• deck.gl
• ヒートマップなど視覚表現に優れたレイヤを使うことができる

MapLibre GL JSの推しポイント

高機能！

• ベクトルタイルを表示
• 2D/3Dの地図を表示

​

高性能！

• WebGLを使った高速な描画

ポイント表示限界数の比較記事

普及活動の動機

あさひなの 　 との出会い

Geospatial Hackers Programにて・・

3Dの建物を表示したい・・

あさひな

　に感動

3Dの建物を表示できた！

動作も軽い！

　 SUGEEEE！

　　って難しくない？

最初はよく分からなくて苦労した

あさひな

style.json ってなんだ？

レイヤの追加ってどうやるの？

ドキュメント、全部英語やん・・

どれ見ればいいんだ？？

初心者にわかりづらい説①

公式ドキュメントで

学習しにくい！？

• チュートリアルがない
• Exampleが探しづらい
• Exampleに解説が少ない

チュートリアルがない！

手を動かしながら学べる教材が欲しい・・

できれば解説付きで・・

Reactのチュートリアル

Vue.jsのチュートリアル

Exampleが探しづらい

Exampleはたくさんあるけど・・ポイント表示はどれだ？！

初見では探すのに苦労した・・

出典: MapLibre Example

Exampleに解説が少ない

id、typeってなんだ！？

初心者がStyle Specifications読むのキツイ

MapLibre Example

Style Specifications

初心者にわかりづらい説②

技術記事が少ない！？

• Qiitaの「MapLibre」タグが付いた記事は133記事（2023/11/9現在）
• ライバル（？）のLeafletは326記事
• 覇権（？）のReactは15654記事

動機

MapLibre GL JS の良さを広めたい！

そのために・・

初心者に分かりやすいコンテンツを

提供したい！

普及活動の内容

Qiita投稿

地図表示、地物表示の方法などを

Qiitaに投稿

• コードの解説付き
• 去年の30DayMapChallengeではMapLibreの記事を多数投稿！

Zenn本出版

初心者が体系的に学べるように

Zennで無料で読める本を出版📚

• コードの解説付き
• サンプルコードも公開

​

Zenn本出版

「分かりやすい」と好評！！

ハンズオン実施

FOSS4Gイベントにて

MapLibre初級編のハンズオン講師を担当

• 実施地域のデータを使ってWebGISを作成
• テキスト、ソースコードを公開

FOSS4G TOKAI 2023

FOSS4G 2023 Japan

ハンズオン実施

「分かりやすい」と好評！！

初心者がつまずきやすいポイント

styleの書き方よくわからん

Style Specificationsに書いてある

最低限わかってればヨシ！

Style Specifications

背景地図が表示されない

CSSの記載を忘れずに

（最初ハマった・・）

Quickstart

CSS書いてないけど

高さ指定が必要！

レイヤの表示順は？

layer配列の上から順に描画される

sort-key プロパティを使うと

値によって並び順を制御できる

背景地図が下

ポイントが上

CDNを使ったライブラリのバージョン指定

バージョンを指定しない場合は

最新バージョンをとってくる

もちろんバージョン指定もできる

リダイレクト

CDNのリンクにバージョンを指定しない場合の書き方

Maputnik分かりづらい

スタイル仕様用のエディタ

使いこなせるようになると便利

​

解説記事書いたよ！

Maputnik

レイヤの表示/非表示どうやるの？

方法はいろいろ・・

• setLayoutProperty 使う ☆オススメ
• OpacityControl 使う

my-layer が

非表示になる！

というか自分もよくつまづく

私の場合はXで投稿して

有識者に教えてもらっている

​

疑問点を投げられる場所があるといいな・・

Xで有識者に教えてもらうあさひな

まとめ

　　はいいぞ

MapLibre GL JSは高機能！

• ベクトルタイルを表示できる
• 3D表示も可能
• WebGLを使った高速な描画が可能

初心者向け教材

学習に苦労したことをきっかけに

初心者に分かりやすい

コンテンツを作った

• Qiita
• Zenn本
• ハンズオン

今後の展望

もっと　 の良さを広めたい！！！

の知見は今後もアウトプット！

ぜひみなさんも！

ご清聴

ありがとうございました！