State of Open Source Web Mapping Libraries

Slide 1

Slide 1 text

State of Open Source Web Mapping Libraries 2024.11.08 - MapLibre Meetup Japan #03 @Tokyo Yasunori Kirimoto

Slide 2

Slide 2 text

Yasunori Kirimoto AWS DevTools Hero MapLibre Voting Member OSGeo Charter Member Owner of dayjournal MapLibre User Group Japan Amplify Japan User Group Notion Sapporo dayjournal 　dayjournal_nori Co-Founder and COO of MIERUNE

Slide 3

Slide 3 text

01　Webマップライブラリとは 02　OSSマップライブラリの紹介 03　まとめ

Slide 4

Slide 4 text

Webマップライブラリとは 0

Slide 5

Slide 5 text

位置情報データ位置情報にはさまざまなデータがありますラスタデータ: 画像 (GeoTIFF ・ JPEG ・ PNG…) ベクトルデータ: オブジェクト (ポイント・ライン・ポリゴン…) ラスタポリゴンラインポイント

Slide 6

Slide 6 text

Webマップライブラリブラウザ上でさまざまな位置情報データや地図を表示・操作できる JavaScript/TypeScriptライブラリ。位置情報を活用したWebアプリケーションを効率的に開発できます

Slide 7

Slide 7 text

マップライブラリとマップサービスの関係 Amazon Location Service ・AWSの環境下で位置情報アプリケーションを構築可能・あくまでAPI機能のためマップライブラリは自由に選択できる Google Maps Platform ・Google Cloudの環境下で位置情報アプリケーションを構築可能・マップライブラリはSDKとして内包されている

Slide 8

Slide 8 text

マップライブラリのライセンスについて OpenLayers MapKit Google Maps Platform オープンソース etc… etc…

Slide 9

Slide 9 text

記事を書いたり ✍ プラグインを作ったり 🗺 etc…

Slide 10

Slide 10 text

dayjournal.booth.pm ５年くらい前に技術書典で本をだしたりもしました 📖 Leaflet v1.3.4 ⁉・Mapbox GL JS v0.50.0 ⁉

Slide 11

Slide 11 text

オープンソースマップライブラリの紹介 02

Slide 12

Slide 12 text

MapLibre GL JS WebGLを使用してベクトルタイルを高速に描画するオープンソースのマップライブラリ。Mapbox GL JSのオープンソースフォークとして開発され、インタラクティブな地図表示が可能・ GitHub 6,600 Star ・ npm 348,141 WKLY DL ・ Contributors 519 ・ Latest v4.7.1

Slide 13

Slide 13 text

maplibregljs-starter ・MapLibre GL JSのスターターを公開しています

Slide 14

Slide 14 text

Leaflet 軽量でシンプルなオープンソースのマップライブラリで、シンプルなAPIによりタイルレイヤーやマーカー表示などの基本的なマッピング機能が利用できます。豊富なプラグインも特徴・ GitHub 41,300 Star ・ npm 1,113,354 WKLY DL ・ Contributors 819 ・ Latest v1.9.4

Slide 15

Slide 15 text

leaflet-starter ・Leafletのスターターを公開しています

Slide 16

Slide 16 text

OpenLayers 高度な地図機能を持つオープンソースのマップライブラリ。ベクトルタイルや多様な投影法のサポートなど、GISに特化した機能を提供。近年はWebGL対応もされてきている OpenLayers ・ GitHub 11,400 Star ・ npm 251,229 WKLY DL ・ Contributors 376 ・ Latest v10.2.1

Slide 17

Slide 17 text

openlayers-starter ・OpenLayersのスターターを公開しています

Slide 18

Slide 18 text

deck.gl WebGLを活用した大規模データの可視化ライブラリ。地図上での高度なデータ視覚化が可能で、 MapLibre GL JSなどと組み合わせて使用されることが多い・ GitHub 12,200 Star ・ npm 138,086 WKLY DL ・ Contributors 251 ・ Latest v9.0.34

Slide 19

Slide 19 text

deckgl-starter ・deck.glのスターターを公開しています

Slide 20

Slide 20 text

CesiumJS WebGLを活用してブラウザ上で3D 地球儀や地図を表示・操作できるオープンソースのマップライブラリ。3D都市モデルの表示や時系列データのアニメーション等も可能・ GitHub 12,900 Star ・ npm 53,451 WKLY DL ・ Contributors 335 ・ Latest v1.123.0

Slide 21

Slide 21 text

cesium-starter ・CesiumJSのスターターを公開しています

Slide 22

Slide 22 text

iTowns フランスの国立機関が開発した WebGLを使用した3D地図表示ライブラリ。地図や地形データの3次元可視化に特化しており、ベクトルタイルにも対応している・ GitHub 1,100 Star ・ npm 1,257 WKLY DL ・ Contributors 47 ・ Latest v2.44.2

Slide 23

Slide 23 text

itowns-starter ・iTownsのスターターを公開しています

Slide 24

Slide 24 text

まとめ 03

Slide 25

Slide 25 text

地理院タイル ● GitHub Star ● npm WKLY DL ● Contributors

Slide 26

Slide 26 text

地理院タイル ● 大量なデータ ● ベクトルタイル ● 投影法対応 ● 3D表現 ● 多機能 ● 手軽さ ● データ可視化 OpenLayers OpenLayers

Slide 27

Slide 27 text

地理院タイル ● 初級者向け ● 中級者向け ● 上級者向け OpenLayers

Slide 28

Slide 28 text

地理院タイル個人的には　　　　　　　　　がおすすめです！ 🗺

Slide 29

Slide 29 text

位置情報技術はニッチで奥深い 🗺 この沼に一緒にハマっていきましょう！

Slide 30

Slide 30 text

地理院タイル Thank you!! Yasunori Kirimoto dayjournal.dev