Zenn
Closed17

WindowsにCharites環境を作ってみる

FOSS4G
vectortile
charites
竹やぶ大好き竹やぶ大好き

WindowsにCharites環境を作ってみる

リポジトリのREADME.mdを参考に進める
https://github.com/unvt/charites

Node.jsをインストール

ダウンロード

https://nodejs.org/ja/

node-v16.13.1-x64.msi

インストーラーを実行

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

Charitesをインストール

スタートメニューから「Node.js command prompt」を起動
nmpコマンドでインストール

>npm install -g @unvt/charites

added 33 packages, and audited 34 packages in 7s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.1.2 -> 8.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.2.0
npm notice Run npm install -g npm@8.2.0 to update!
npm notice

ヘルプを実行

>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

Usage: cli [options] [command]とか言われてるけどちゃんと入ってる？

竹やぶ大好き竹やぶ大好き

一応、現時点でのtagsの最新版（0.1.2）はインストールされている。
C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\package.json

package.json
{
  "name": "@unvt/charites",
  "version": "0.1.2",
  "description": "",
  "bin": {
    "charites": "dist/cli.js"
  },
  "scripts": {
・・・
竹やぶ大好き竹やぶ大好き

style.jsonからyamlに変換してみる。

サンプルのstyle.jsonをダウンロード（git入ってたらcloneがいいね）

https://github.com/geolonia/basic

CodeからDownloadZIPを選択

ダウンロードしたファイルを解凍

Node.js command promptで解答ディレクトリに移動して
変換コマンドを実行

> cd c:\work\basic
> charites convert style.json

エラーが出なければOKかな？

フォルダ内にstyle.ymlとlayersフォルダが出来た。

成功

竹やぶ大好き竹やぶ大好き

プレビューしながら編集してみる

Node.js command promptでcharites serveコマンドを実行

> charites serve style.yml

ファイアウォール機能がアクセス許可を確認してきたら「アクセスを許可する」を選択する

chrome（標準ブラウザ）が開いて「http://localhost:8080/#0/0/0」にアクセスしてるが真っ白で何も表示されない。

プロンプトでもめっちゃ怒られてた。

Provider: default
Loading your style: c:\work\basic\style.yml
Your map is running on http://localhost:8080/

TypeError: Cannot use 'in' operator to search for 'ref' in !!inc/file layers\background.yml
    at Object.validateLayer [as layer] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13568:19)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13871:46)
    at Object.validateArray [as array] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13126:36)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13871:46)
    at validateObject (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13077:36)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13873:27)
    at validateStyleMin (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13895:32)
    at Object.validateStyle [as validate] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:14908:16)
    at Object.validateStyle (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\dist\lib\validate-style.js:12:36)
    at Server.<anonymous> (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\dist\commands\serve.js:44:38)

失敗

竹やぶ大好き竹やぶ大好き

style.ymlを確認したら

style.yml
sources:
  oceanus:
    type: vector
    url: https://tileserver.geolonia.com/oceanus/tiles.json?key=YOUR-API-KEY
  geolonia-water:
    type: vector
    url: https://tileserver.geolonia.com/water/tiles.json?key=YOUR-API-KEY
  geolonia:
    type: vector
    minzoom: 8
    url: https://tileserver.geolonia.com/v2/tiles.json?key=YOUR-API-KEY

このサンプルデータにアクセスするためにはAPI KEYが必要っぽいですね
たぶん原因はこれだと思うけどエラーメッセージがTypeError（よくでるやつ）で
データソースにアクセス出来ないからだってわかりにくいね

竹やぶ大好き竹やぶ大好き

このエラーはWindows環境でconvertが正しくできないことにより発生している。
API-KEYによるものではない。

竹やぶ大好き竹やぶ大好き

では気を取り直して

https://github.com/optgeo/antarctica-style

こちらのレポジトリをサンプルで試してみます。
こちらはstyle.jsonが入っていないので変換からの流れはつかめないのは残念ですが…

先ほどと同様にダウンロードして展開
ディレクトリに移動して

> charites serve style.yml

今度はブラウザが開いて地図が表示されました。

layersディレクトリのbackground.ymlをエディタで編集

background.yml
id: background
type: background
paint: 
  background-color: 
    - step
    - - zoom
    - rgb(255, 255, 255)
#    - 13
#    - rgb(161, 229, 252)
    - 12
    - rgb(255, 0, 0)

ファイルを保存するとブラウザの地図に自動的に反映される

今度は成功
コメント書けるの最高じゃないか！

終わらせ方はコンソールで「Ctrl+c」でいいのかな？

竹やぶ大好き竹やぶ大好き

style.ymlからstyle.jsonを生成してみる

Node.js command promptでcharites buildコマンドを実行

charites build style.yml my_style.json

指定したファイル名のstyle.jsonが出来上がった

開いて確認

my_style.json
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": [
          "step",
          [
            "zoom"
          ],
          "rgb(255, 255, 255)",
          12,
          "rgb(255, 0, 0)"
        ]
      }
    },

変更点がちゃんと反映されている

成功

竹やぶ大好き竹やぶ大好き

README.mdのDevelopmentを参考にmainブランチのソースでCharitesを使う

アンインストール

> npm uninstall -g @unvt/charites
removed 33 packages, and audited 1 package in 931ms
found 0 vulnerabilities

Charitesのリポジトリからcodeをダウンロードして解凍（git入ってたらcloneがいいね）
https://github.com/unvt/charites

ディレクトリに移動してnpm install

> cd ..\charites

> 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
npm ERR! gyp info using node-gyp@8.3.0
npm ERR! gyp info using node@16.13.1 | win32 | x64
npm ERR! gyp info ok
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@8.3.0
npm ERR! gyp info using node@16.13.1 | win32 | x64
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if "python3" can be used
npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
この後ずーっと怒られ続ける

失敗

竹やぶ大好き竹やぶ大好き

サーバに公開されているstyle.jsonをダイレクトにYAMLに変換する。

地理院地図vectorで試してみる。

> curl https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json | charites convert - style.yml

style.ymlとlayersディレクトリができた。
layersの中には774レイヤのymlができている。
すごーい。

今後は作成されたYAMLをstyle.jsonに戻してみる。

> charites build style.yml style.json
TypeError: Cannot use 'in' operator to search for 'ref' in !!inc/file layers\gsibv-vectortile-layer-761.yml

怒られました…なんでかな？

ファイルの置き場PATHに日本語が含まれているからかな？と思って移動してみたけど変わらず。
nodeなのかreactなのか知らんけど、なんもかんでもTypeErrorを出すところ嫌い。

charites serveも同様

> charites serve style.yml
Provider: default
Loading your style: C:\work\gsi\style.yml
Your map is running on http://localhost:8080/

TypeError: Cannot use 'in' operator to search for 'ref' in !!inc/file layers\gsibv-vectortile-layer-761.yml
    at Object.validateLayer [as layer] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13568:19)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13871:46)
    at Object.validateArray [as array] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13126:36)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13871:46)
    at validateObject (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13077:36)
    at validate (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13873:27)
    at validateStyleMin (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:13895:32)
    at Object.validateStyle [as validate] (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\node_modules\@maplibre\maplibre-gl-style-spec\dist\index.js:14908:16)
    at Object.validateStyle (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\dist\lib\validate-style.js:12:36)
    at Server.<anonymous> (C:\Users\<user>\AppData\Roaming\npm\node_modules\@unvt\charites\dist\commands\serve.js:44:38)
竹やぶ大好き竹やぶ大好き

自分が普段使っているstyle.jsonなどで試してみたけど
antarctica-styleのレポジトリだと成功するだけでstyle.jsonから変換したものはbuildできない！
差分を比較して検証します。

竹やぶ大好き竹やぶ大好き

Linux環境でconvertしたファイルとWindows環境でconvertしたファイルを比較したところ
style.ymlのlayersセクションで各レイヤを参照する文字列がシングルクォートで囲まれてしまっていることが判った。

試しにシングルクォートを削除したところ正常にbuildが通ることを確認。
また、LinuxとWindowsでbuildしたstyle.jsonを比較して差異が無いことが確認できた。

竹やぶ大好き竹やぶ大好き

WSLで最新版のCharitesを動かして、
WindowsのVSCodeでymlを編集しつつ、
LivePreviewをWindowsのブラウザ動かすことができた。
最新版を使いたいならこれが一番楽かもしれない。

竹やぶ大好き竹やぶ大好き

ざっくり手順

コマンドプロンプトを管理者として実行

wsl --install

再起動

自動的にubuntuが起動してくる
ユーザー・パスワードを入れてアカウントを作成

$ sudo apt update
$ sudo apt upgrade

$ sudo apt install nodejs npm
$ sudo node -v
v10.19.0

$ sudo npm install n -g
$ sudo n stable

$ sudo apt purge -y nodejs npm

$ exec $SHELL -l
$ sudo node -v
v16.13.1

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

$ cd ..
$ git clone https://github.com/optgeo/antarctica-style.git
$ cd antarctica-style/
$ charites serve style.yml

windowsでChrome立ち上がる

windowsのexplorerで
\\wsl$\Ubuntu\home\ozaki\antarctica-style\layersにアクセス

yml編集すると地図スタイルが変わる

このスクラップは2021/12/14にクローズされました