WindowsでCharitesを使ってMapboxVectorTileのスタイルを編集できる環境を構築してみた

# はじめに

FOSS4G 2021 Japan Onlineのチュートリアルデイで「[Charites + GitHub で完結、ベクトルタイルのスタイリングをしてみよう！](https://www.osgeo.jp/events/foss4g-2021/foss4g-2021-japan-online/foss4g-japan-2021-online-tutorial-day#tutorial3)」に参加してCharitesの便利さを実感したのでWindowsで動かしてみました。

Charitesはいいぞ

# WindowsでCharitesを使うには

基本charitesレポジトリのREADME.mdを読めばインストールできます。

https://github.com/unvt/charites

Charitesを使うにはNode.jsの環境が必要になります。
WindowsでNode.jsを動作させるにはWindows版Node.jsをインストールする方法と
WSL上にNode.jsをインストールする方法があります。

今回はどちらの方法も試してみました。

- [WSLのNode.jsでCharitesを実行](#wslのnodejsでcharitesを実行)
- [Windows版Node.jsでCharitesを実行](#windows版nodejsでcharitesを実行)

現時点ではWindowsでの利用は想定されていないようなので推奨はWSLでの実行だと感じました。
Linuxコマンドが判らない人はWindows版のNode.jsを使ってもいいでしょう。
殆どの場合は問題にならないかもしれませんが、Windows版のNode.jsで実行する場合は、諸々の不具合やリリース版以外のバージョンが使えない[^1]問題があります。
[^1]: Charitesの開発環境を整備する際にmapnikがエラーを吐いて失敗してしまいます。

## ■WSLのNode.jsでCharitesを実行
Linuxのコマンドに抵抗がない人はこちらが推奨かと思われます。
WSL上のファイルにアクセスするのにちょっとだけ変則的なPATH指定が必要ですが
それ以外はWindowsネイティブな感じで使用できます。

### WSLにUbuntuをインストール

コマンドプロンプトを管理者として実行してWSLコマンドでインストール。
ディストリビューション指定をしない場合はubuntuが入るっぽい。

```dosbatch
> wsl --install
```

インストールが完了したらWindowsを再起動。

再起動が完了するとUbuntuのコンソールが立ち上がってくる。
ユーザー名とパスワードを入力してアカウントを作成。（今後このアカウントでWSLを使うことになる）

最初に環境のアップデート

```shell
$ sudo apt update
$ sudo apt upgrade
```


### Node.jsとnpmをインストール

```shell
$ sudo apt install nodejs npm
```

バージョンの確認

```shell
$ sudo node -v
v10.19.0
```

古いのでバージョンアップ

```shell
$ sudo npm install n -g
$ sudo n stable

$ sudo apt purge -y nodejs npm

$ exec $SHELL -l
```

再度バージョンの確認


```shell
$ sudo node -v
v16.13.1
```

最新版になった。

***

### Charitesのインストール

リリース版のインストールは以下のコマンド

```
npm install -g @unvt/charites
```

普段はこれで問題ないと思いますが、
現時点でのリリース版にはバグがあるので
Charites最新版をダウンロードしてインストールする。

```shell
$ git clone https://github.com/unvt/charites.git
$ cd charites/
$ npm install
$ npm run build
$ sudo npm install -g .
```

helpを表示してみる

```shell
$ charites help
Usage: charites [options] [command]

Options:
  -v, --version                           output the version number
  -h, --help                              display help for command

Commands:
  init [options] <file>                   initialize a style JSON
  convert <source> [destination]          convert the style JSON to YAML
  build [options] <source> [destination]  build a style JSON from the YAML
  serve [options] <source>                serve your map locally
  help [command]                          display help for command
```

ちゃんとインストールできたっぽい。

***

### Charitesを動かしてみる

#### style.jsonからYAMLに変換

試しに「[Mapbox GL JSで地理院地図Vector風の地図を表示するサンプル](https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js)」のstyle.jsonをYAMLに変換

```shell
$ cd ..
$ mkdir gsi
$ cd gsi
$ curl https://raw.githubusercontent.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/master/std.json | charites convert - style.yml
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  740k  100  740k    0     0  2358k      0 --:--:-- --:--:-- --:--:-- 2366k

$ ls
layers  style.yml
```

できた。

#### 生成されたYAMLを編集

WSLのファイルには`\\wsl$`でアクセスできるそうだ。
WindowsのExplorerで`\\wsl$\Ubuntu\home\<アカウント名>\gsi`を開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/3f3face3-c40c-ea3a-22aa-d50927d38b57.png)

このサンプルスタイルは初期座標が指定されていないので
style.ymlをテキストエディタ開いて追記してみます。

```diff_yaml
version: 8
+ center:
+   - 135
+   - 35
+ zoom: 12
glyphs: https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf
sources:
  gsibv-vectortile-source-1-4-16:
    type: vector
```

#### ライブプレビューを実行

そしたらライブプレビューを実行してみましょう

```shell
$ charites serve style.yml
```

ブラウザが開いて地図が表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/720e7245-ecea-15df-1f6c-4bd65a467687.png)

道路の色を変えてみる

`layers\gsibv-vectortile-layer-1112.yml`を開いて

```diff_yaml
paint:
-   line-color: rgba(255,255,0,1)
+   line-color: rgba(255,100,0,1)
  line-width: 3
```

ブラウザ上の道路の色が変わった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/962df013-0082-27c3-b209-b0ad6930cae9.png)

serveを終わらせるにはコンソールで「Ctrl+c」
ブラウザは普通に閉じればOK

#### style.jsonを生成

編集したYMALからstyle.jsonを生成

```shell
$ charites build style.yml style.json
```

style.jsonが生成された。

***

### バッチファイルから実行
DOSからwsl上のプログラムが実行できるのでよくやる操作はバッチファイルにしておけます。

例えば

```dosbatch:charite_serve.bat
REM ライブプレビューを実行 ymlをフルパス指定してね
wsl charites serve /home/<user>/gsi/style.yml
```

こんなバッチを作ってデスクトップにおいておけば、態々コマンドプロンプト開いてコマンドを実行する必要もなくライブプレビューを実行することができますね。


良い感じ。

***

## ■Windows版Node.jsでCharitesを実行

普通のCUIアプリケーションとして使うことができるのが利点です。
諸々の不具合はありますが、殆どの場合は問題にならないと思います。

### Node.jsをインストール

Node.jsのサイトから最新版をダウンロード

https://nodejs.org/ja/

ダウンロードしたインストーラーを実行
node-v16.13.1-x64.msi
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/770abfd1-9abc-fc12-761b-07608abcf7d6.png)

設定は全部初期状態で進めました。

***

### Charitesをインストール

スタートメニューから「Node.js command prompt」を起動
（標準のコマンドプロンプトでも動くっぽい）
nmpコマンドでインストール

```dosbatch
> npm install -g @unvt/charites
```

helpを表示してみる

```dosbatch
>charites help
Usage: cli [options] [command]

Options:
  --provider [provider]                      your map service. e.g. `mapbox`, `geolonia`
  --mapbox-access-token [mapboxAccessToken]  Access Token for the Mapbox
  -h, --help                                 display help for command

Commands:
  init <file>                                initialize a style JSON
  convert <source> [destination]             convert the style JSON to YAML
  build [options] <source> [destination]     build a style JSON from the YAML
  serve <source>                             serve your map locally
  help [command]                             display help for command
```

インストールはできたっぽい。
HELPに表示される使い方は間違っているので[README.md](https://github.com/unvt/charites/blob/main/README.md)を参照しましょう。

***

### Charitesを動かしてみる

#### style.jsonからYAMLに変換

試しに「[Mapbox GL JSで地理院地図Vector風の地図を表示するサンプル](https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js)」のstyle.jsonをYAMLに変換

```dosbatch
> cd c:\work
> mkdir gsi
> cd gsi
> curl https://raw.githubusercontent.com/gsi-cyberjapan/gsivectortile-mapbox-gl-js/master/std.json | charites convert - style.yml
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  740k  100  740k    0     0   740k      0  0:00:01 --:--:--  0:00:01  894k
```

ファイルは出来ましたが正しくできていませんので修正をかけます。
出力されたstyle.ymlをテキストエディタで開く。

```yml
version: 8
glyphs: https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf
sources:
  gsibv-vectortile-source-1-4-16:
    type: vector
    tiles:
      - https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf
    minzoom: 4
    maxzoom: 16
    attribution: >-
      <a href="https://maps.gsi.go.jp/vector/"
      target="_blank">地理院地図Vector（仮称）</a>
layers:
  - '!!inc/file layers\gsibv-vectortile-layer-761.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-762.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-763.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-764.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-765.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-766.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-767.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-768.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-769.yml'
  - '!!inc/file layers\gsibv-vectortile-layer-770.yml'
```

layersのエントリーがシングルクォートで囲まれてしまっていますので置換で消してしまいましょう。

```yml
version: 8
glyphs: https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf
sources:
  gsibv-vectortile-source-1-4-16:
    type: vector
    tiles:
      - https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf
    minzoom: 4
    maxzoom: 16
    attribution: >-
      <a href="https://maps.gsi.go.jp/vector/"
      target="_blank">地理院地図Vector（仮称）</a>
layers:
  - !!inc/file layers\gsibv-vectortile-layer-761.yml
  - !!inc/file layers\gsibv-vectortile-layer-762.yml
  - !!inc/file layers\gsibv-vectortile-layer-763.yml
  - !!inc/file layers\gsibv-vectortile-layer-764.yml
  - !!inc/file layers\gsibv-vectortile-layer-765.yml
  - !!inc/file layers\gsibv-vectortile-layer-766.yml
  - !!inc/file layers\gsibv-vectortile-layer-767.yml
  - !!inc/file layers\gsibv-vectortile-layer-768.yml
  - !!inc/file layers\gsibv-vectortile-layer-769.yml
  - !!inc/file layers\gsibv-vectortile-layer-770.yml
```

これでYAMLが出来上がりました。

#### 生成されたYAMLを編集

このサンプルスタイルは初期座標が指定されていないので
再度style.ymlをテキストエディタ開いて追記してみます。

```diff_yaml
version: 8
+ center:
+   - 135
+   - 35
+ zoom: 12
glyphs: https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf
sources:
  gsibv-vectortile-source-1-4-16:
    type: vector
```

#### ライブプレビューを実行

そしたらライブプレビューを実行してみましょう

```dosbatch
> charites serve style.yml
```

ファイアウォール機能がアクセス許可を確認してきたら「アクセスを許可する」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/b2776f1f-c6b9-12e5-6620-696d288848c3.png)


ブラウザが開いて地図が表示されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/720e7245-ecea-15df-1f6c-4bd65a467687.png)

道路の色を変えてみる

`layers\gsibv-vectortile-layer-1112.yml`を開いて

```diff_yaml
paint:
-   line-color: rgba(255,255,0,1)
+   line-color: rgba(255,100,0,1)
  line-width: 3
```

ブラウザ上の道路の色が変わった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240181/962df013-0082-27c3-b209-b0ad6930cae9.png)

serveを終わらせるにはコンソールで「Ctrl+c」
ブラウザは普通に閉じればOK

#### style.jsonを生成

編集したYMALからstyle.jsonを生成

```dosbatch
> charites build style.yml style.json
```

style.jsonが生成された。

***

### バッチファイルから実行

DOSにPATHが通っているようなのでよくやる操作はバッチファイルにしておけます。

例えば

```dosbatch:charite_serve.bat
REM 作業フォルダに移動
cd c:\work\gsi

REM ライブプレビューを実行
charites serve style.yml
```

こんなバッチを作ってデスクトップにおいておけば、態々コマンドプロンプト開いてコマンドを実行する必要もなくライブプレビューを実行することができますね。

良い感じ。

***

# さいごに

MapboxVectorTileは便利なのにスタイル（style.json）の管理が超絶煩雑になりがちです。
Charitesを使うことでスタイル管理に希望の光が差したような気がしています。


### これがあったらといいのに、と感じた機能

Charitesを使ってみたら超便利なので便利ついでにこれもできたらいいのにという願望。

- LivePreviewで地図をクリックしてlayersのどれかを識別できる機能（Maputnikみたいな）
現状だと地図見ながらこの地物の色を変えようと思ってもそれがどのレイヤなのか特定ができないです。

- buildする際にtilesのURI指定オプション
TileServerGLを通した場合は公開style.jsonと生style.jsonはURI設定が異なるため指定できると嬉しい。


### Developで困った事象

- Windowsでmapnikインストールできない ＝ Charitesの開発できない

```dosbatch
> npm install
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm ERR! code 1
npm ERR! path c:\work\charites\node_modules\mapnik
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=c:\work\charites\node_modules\mapnik\lib\binding\mapnik.node --module_name=mapnik --module_path=c:\work\charites\node_modules\mapnik\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using node-pre-gyp@1.0.6
npm ERR! node-pre-gyp info using node@16.13.1 | win32 | x64
npm ERR! node-pre-gyp info check checked for "c:\work\charites\node_modules\mapnik\lib\binding\mapnik.node" (not found)
npm ERR! node-pre-gyp http GET https://mapbox-node-binary.s3.amazonaws.com/mapnik/v4.5.8/Release/win32-x64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 403 Forbidden on https://mapbox-node-binary.s3.amazonaws.com/mapnik/v4.5.8/Release/win32-x64.tar.gz
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for mapnik@4.5.8 and node@16.13.1 (node-v93 ABI, unknown) (falling back to source compile with node-gyp)
npm ERR! node-pre-gyp WARN Hit error response status 403 Forbidden on https://mapbox-node-binary.s3.amazonaws.com/mapnik/v4.5.8/Release/win32-x64.tar.gz
npm ERR! gyp info it worked if it ends with ok
```

解決方法知っていたら教えてください。

# 本記事のライセンス

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">![クリエイティブ・コモンズ・ライセンス](https://i.creativecommons.org/l/by/4.0/88x31.png)</a>
この記事は <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">クリエイティブ・コモンズ 表示 4.0 国際 ライセンス</a>の下に提供されています。