io-site で Overture Maps のデータをブラウジングする
ちょっとどんなデータが入ってるか見てみたいだけなんだけど、を叶えるio-siteのご紹介です。
Overture Maps では全球分、400GBのデータをダウンロードするか、overturemaps-pyで任意の領域のデータを取得するか、選べるようになりました。が、単純に適当な場所のデータをブラウジングしてみたいという時には、いちいちデータをダウンロードして、可視化ツールに入れてみて、というのは面倒です。もっと簡単に、手軽に、いろんな場所のいろんなテーマのデータを見たいんだ、という願いを叶えるのがio-siteです。
このツールを使えば、Overture Mapsの最新のデータをローカルに立てたwebサーバーで閲覧することができます。
環境構築
事前にNode.js、vite、eslintをインストールしておきます。
今回は以下のバージョンで検証しました。
- Node.js: v18.9.0
- vite: 5.2.8
- @eslint/compat@1.1.0
- @eslint/js@9.5.0
eslintをインストールする際に利用環境についていくつか聞かれます。
以下の選択でうまくいきました。参考にどうぞ。(他の設定でも動くかもしれませんが。)
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ The React plugin doesn't officially support ESLint v9 yet. What would you like to do? · 9.x
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:
eslint@9.x, globals, @eslint/js, typescript-eslint, eslint-plugin-react, @eslint/compat
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
io-siteを立ち上げる
io-siteをGitHubリポジトリからクローンします。
git clone git@github.com:OvertureMaps/io-site.git
あとは、以下のコマンドを実行するとローカルにwebサーバーが立ち上がります。
cd io-site/site/
npm run dev
実行環境によっては異なるポート番号の場合もあるかもしれません。
VITE v5.2.8 ready in 144 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ご利用のブラウザのアドレスバーに http://localhost:5173/ を打ち込むとio-siteが立ち上がります。
io-siteでブラウジング
こんな画面が表示されれば成功です。
表示するレイヤーは、Base、Buildings、Divisions、Places、Transportationが選択できます。
適当な地物をクリックすると、Inspector Panelに属性情報が表示されます。
データをダウンロードしてみる
ウィンドウの右上にある"Download Visible"を使って、データをダウンロードしてみました。
この機能はズームレベル16以上の場合にのみ利用可能とのことです。
実際にダウンロードしてみたところ、データレイヤーの指定はできず、BuildingsのみGeoJSON形式で取得できました。
(c)OpenStreetMap contributors | Overture Maps Foundation
より広域のデータをダウンロードしたい場合には、overturemaps-pyを利用してください、とのことです。
こちらに使い方の記事がありますので参考にしてください。
overturemaps-pyでOverture MapsのデータをDLする
Discussion