あなたは地図を今すぐタダで作る 個人開発祭り 2024-04
2024-04-12yuiseki.icon
【オフライン開催】個人開発祭り #3【配信もあり】 - connpass
#個人開発祭り #3
自己紹介
yuiseki.iconyuiseki
好きな地図を好きに作りたいだけの、イカれた地図馬鹿だっ！！
https://gyazo.com/e5819744d613dbfd5982517bcf525d90
私はなぜ地図の個人開発をするのか
逆に止める方法がわからない
https://gyazo.com/e50a1e1b5dd2a5cdd5c388f654bcf8a4
今から皆さんにはタダで地図を作ってもらいます
40秒で支度しな
https://gyazo.com/312b010d5a7a40381ec4c3606fbe9d3c
https://bit.ly/yuiseki-map-2024
https://gyazo.com/9f53ef906e8a6670e3dc1c63e120ab80
趣旨
もっと地図の個人開発しようじゃん
課題
お手軽な地図データが知られていない
お手軽な地図ライブラリが知られていない
デモ
今日のために1時間くらいで作ったリポジトリ
青いボタンを押してください
MapLibre GL JSとReact Map GLで、OpenStreetMapの地図ベクトルタイルを表示
Overpass APIで、中央区のポリゴンと、中央区のラーメン屋の一覧を取得
osmtogeojsonで、Overpass APIのレスポンスをGeoJSONに変換
Turf.jsで、中央区のポリゴンが収まるバウンディングボックスを計算して、ズームイン
https://github.com/yuiseki/vector-tile-builder
OpenStreetMapのベクトルタイルを特定の地域だけ抜き出して構築するソフトウェア
ぶっ壊れてたのでさっき直しました
https://yuiseki.github.io/vector-tile-builder/#6.13/35.212/139.077
https://github.com/yuiseki/osm-regional-pmtiles-builder
OpenStreetMapのPMTilesを特定の地域だけ抜き出して構築するソフトウェア
https://yuiseki.github.io/osm-regional-pmtiles-builder/
https://github.com/yuiseki/vite-react-map-gl-template
MapLibre GL JSとReact Map GLで、OpenStreetMapの地図を表示するVite.jsのテンプレート
あんまり面白くもなく便利でもないのでボツにします！
今日のまとめ
MapLibre GL JSとReact Map GLとTurf.jsとOverpass APIとosmtogeojsonを組み合わせれば、なかなか面白い地図ができる
今日しない話
Google Maps、Leaflet.js、Vue.js
今日する話
地図のデータ構造
ラスタータイル、ベクトルタイル、PMTiles
自由な地図データ
OpenStreetMap
https://tile.openstreetmap.org/
https://tile.openstreetmap.jp/
自由な地図ライブラリ
MapLibre GL JS、React Map GL、Turf.js、GeoJSON、osmtogeojson、deck.gl
地図API
Overpass API、Nominatim API、Valhalla API
ラスタータイル
これは何？
地図データを、画像として配信するデータ形式
注意ポイント
ものすごく大量の画像ファイルを用意する必要がある
またはリアルタイムに画像を生成するサーバーを用意する必要がある
見た目をあとから変更することができない
お得ポイント
あんまりない！
ベクトルタイル
これは何？
地図データを、高速かつ低コストで配信するデータ形式
注意ポイント
どういう見た目にするのかを別途決定してやる必要がある
お得ポイント
ラスタータイルと比べると容量が小さい！
見た目をあとから変更することができる！
工夫すればタダで地図のデータが配置・配信できる！
PMTiles★
これは何？
地図データを、高速かつ低コストで配信するデータ形式
ベクトルタイルよりもさらに効率的なデータ形式
1つの巨大なファイルになる
HTTP Rangeリクエストによって、必要な部分だけベクトルタイルのデータを取得する
注意ポイント
どういう見た目にするのかを別途決定してやる必要がある
お得ポイント
見た目をあとから変更することができる！
タダで地図のデータが配置・配信できる！
情報
GitHubリポジトリ
GitHub - protomaps/PMTiles: Cloud-optimized + compressed single-file tile archives for vector and raster maps
公式サイト
PMTiles Concepts | Protomaps Docs
OpenStreetMap
https://www.openstreetmap.org/
これは何？
地図のWikipediaみたいな存在
お得ポイント
タダで地図のデータが手に入る！
間違ってた場合は自分で修正可能！
Wikipediaと同様に編集にはルールがあるので注意！
https://tile.openstreetmap.org/
これは何？
OpenStreetMap公式のラスタータイル配信サーバー
注意ポイント
このタイルサーバーはOpenStreetMap本家でも使われている
乱用禁止というお達しがある
商用利用には向いていない
お得ポイント
OpenStreetMap本家の更新の反映が爆速！
情報
https://tile.openstreetmap.org/{z}/{x}/{y}.png
https://tile.openstreetmap.jp/
これは何？
OpenStreetMap Foundation Japanのベクトルタイル配信サーバー
ラスタータイルも配信してます
さくらインターネット様が提供してくれている
注意ポイント
基本的なマナーとして乱用禁止
商用利用には向いていない
お得ポイント
日本語対応！
タダでOpenStreetMapのベクトルタイルとPMTilesが手に入る！
ベクトルタイル
https://tile.openstreetmap.jp/
PMTiles
https://tile.openstreetmap.jp/static/
情報
https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json
タダで商用利用や乱用したい場合
タダで地図配信サーバーを立てるのは難しい
yuiseki/vector-tile-builder
これは何？
OpenStreetMapのベクトルタイルを特定の地域だけ抜き出して構築するソフトウェア
注意ポイント
全世界や広範囲はカバーできない
お得ポイント
GitHub Pagesにもタダでデプロイ可能！
https://yuiseki.github.io/vector-tile-builder/
yuiseki/osm-regional-pmtiles-builder
これは何？
OpenStreetMapのPMTilesを特定の地域だけ抜き出して構築するソフトウェア
注意ポイント
全世界や広範囲はカバーできない
お得ポイント
GitHub Pagesにもタダでデプロイ可能！
https://yuiseki.github.io/osm-regional-pmtiles-builder/
お得なライブラリやAPIの紹介
MapLibre GL JS
これは何？
ブラウザでベクトルタイルを表示するためのライブラリ
お得ポイント
タダでベクトルタイルが表示できる！
情報
maplibre-gl - npm
GitHubリポジトリ
GitHub - maplibre/maplibre-gl-js: MapLibre GL JS - Interactive vector tile maps in WebGL2
ホームページ
MapLibre GL JS
注意ポイント
似てるやつ
Mapbox GL JS
GitHub - mapbox/mapbox-gl-js: Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
実はこっちが本家なんだけど
オープンライセンスじゃないので注意
React Map GL
これは何？
MapLibre GL JSやMapbox GL JSをReactで扱うためのラッパー
お得ポイント
ReactでMapLibre GL JSが使えて超便利！！！！！！！！
インタラクティブかつ複雑な地図を開発できる！！
情報
react-map-gl - npm
code:bash
npm install react-map-gl maplibre-gl
↑MapLibre GL JSとセットで使う場合はこうやってインストールする必要がある
GitHubリポジトリ
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS
ホームページ
Home | React Map GL
Vite.js向けの便利なテンプレート
GitHub - yuiseki/vite-react-map-gl-template: ⚡🗺 Most simple template for Vite + react-map-gl + TypeScript.
テンプレートのデプロイ例
https://yuiseki.github.io/vite-react-map-gl-template/
Turf.js★
これは何？
高度な地理空間演算が実装されたライブラリ
注意ポイント
Typescriptの型がややムズ
お得ポイント
高度な地理空間演算をブラウザ上で実行できる！
情報
@turf/turf - npm
code:bash
npm install @turf/turf
code:bash
npm install --save-dev @types/turf
GitHubリポジトリ
GitHub - Turfjs/turf: A modular geospatial engine written in JavaScript and TypeScript
ホームページ
Turf.js | Advanced Geospatial Analysis
https://turfjs.org/docs/
Overpass API★
これは何？
OpenStreetMapのデータをOvarpass QLという独自のクエリ言語で取得することができるAPI
注意ポイント
基本的なマナーとして乱用禁止
商用利用には向いていない
お得ポイント
タダでOpenStreetMapのデータを柔軟に取得して可視化できて便利！
情報
https://overpass-turbo.eu/
https://z.overpass-api.de/api/interpreter
geojson (npm)
情報
geojson - npm
code:bash
npm install geojson
GitHubリポジトリ
GitHub - caseycesari/GeoJSON.js: Turn your geo data into GeoJSON. For Node.js and the browser.
GitHub - eugeneYWang/GeoJSON.ts: Turn your geo data info GeoJSON, as a parser, for TypeScript environment
osmtogeojson
注意ポイント
メンテが止まっている……
情報
osmtogeojson - npm
code:bash
npm install osmtogeojson
GitHubリポジトリ
GitHub - tyrasd/osmtogeojson: convert osm to geojson
ホームページ
osmtogeojson
ここからは上級者向け
Nominatim API
これは何？
OpenStreetMapの地名情報を活用できるAPI
ジオコーディングや逆ジオコーディングに使える
注意ポイント
基本的なマナーとして乱用禁止
商用利用には向いていない
お得ポイント
タダでジオコーディングや逆ジオコーディングができて便利！
Valhalla API
これは何？
OpenStreetMapの道路情報に基づいて経路を計算できるAPI
注意ポイント
基本的なマナーとして乱用禁止
商用利用には向いていない
お得ポイント
タダでルート案内ができて便利！
deck.gl
これは何？
3Dでカッコイイ地図を開発できるライブラリ
注意ポイント
依存関係が激ムズ
お得ポイント
カッコイイ！
情報
deck.gl - npm
code:bash
npm install deck.gl
GitHubリポジトリ
GitHub - visgl/deck.gl: WebGL2 powered visualization framework
ホームページ
Home | deck.gl
Vite.js向けの便利なテンプレート
GitHub - yuiseki/vite-react-map-gl-deck-gl-template: ⚡🗺 Most simple template for Vite + deck.gl + react-map-gl + TypeScript.
テンプレートのデプロイ例
https://yuiseki.github.io/vite-react-map-gl-deck-gl-template/
「自分、Vue.js派なんだけど……」
スマン
あんまり良さげなライブラリが見つかりませんでした
良いのあったら教えて下さい