はじめに
ベクトルタイルのスタイリングをする際には、Maputnik等を用いても出来ますが、ファイル上で編集を行いたいときには、JSONファイルで行うことになります。しかし、地図のスタイリングが記載されているJSONファイルは全てのレイヤの情報が記述されており、非常に長くなることが多いため可読性が低く読みにくいです。その問題を解決するために開発されたcharitesというツールがあります。今回は、そのcharitesの簡単な使用方法について書いていきます。
環境
macOS Sonoma: 14.6.1
node.js: v20.15.1
npm: 10.7.0
charitesのインストール
charitesのドキュメントに記載されている通り、以下のコマンドを実行します。node.jsとnpmは事前にインストールしておく必要があります。
npm install -g @unvt/charites
@unvt/charitesは、特定のスコープに属するパッケージで、スコープは@unvtです。スコープは、パッケージの名前空間のようなもので、同じ名前のパッケージが異なるスコープで存在することを可能にします。
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 YAML
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
JSONファイルからYAMLファイルへ変換
こちらの記事で作成したJSONファイルをYAMLファイルに変換してみます。
元のJSONファイルは以下のとおりです。
{
"version": 8,
"name": "Empty Style",
"metadata": {"maputnik:renderer": "mlgljs"},
"sources": {
"v": {
"type": "vector",
"tiles": [
"https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf"
],
"minzoom": 0,
"maxzoom": 4
}
},
"sprite": "",
"glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "coastl",
"type": "line",
"source": "v",
"source-layer": "coastl",
"maxzoom": 5
},
{
"id": "landmass",
"type": "fill",
"source": "v",
"source-layer": "landmass",
"maxzoom": 5,
"paint": {"fill-color": "rgba(195, 176, 176, 1)"}
},
{
"id": "riverl",
"type": "line",
"source": "v",
"source-layer": "riverl",
"maxzoom": 5,
"paint": {"line-color": "blue", "line-width": 2}
}
],
"id": "dsyugj9"
}
このJSONファイルをYAMLファイルに変換します。
YAMLファイルとは
YAML（YAML Ain’t Markup Language）とは、データ形式の一つで、ソフトウェアの設定ファイルなどでよく用いられます。ファイル拡張子は「.yml」とすることが多いですが、公式には「.yaml」が標準とされます。
基本的な仕様
YAMLでは基本的に「シーケンス」（配列）、「マッピング」（連想配列）、「スカラ」（単体のデータ）の3種類の形式の組み合わせとしてデータを記述していきます。
シーケンスやマッピングの入れ子（ネスト）構造の表現は、1文字以上の半角スペースを行頭に挿入して字下げ（インデント）することによって行います。スペースの数は任意ですが、タブ文字で代用することはできません。
シーケンスは、一行で記述する場合は [ Red, Green, Blue ] のように角括弧で囲って値をカンマ区切りで並べます。一行に一項目を記述する場合は先頭をハイフン（-）とします。マッピングは「key : value」のようにコロン（:）でキーと値を対応付けます。
では、JSONファイルからYAMLファイルに変換しましょう。
charites convert download_style.json
とすると、以下のYAMLファイルが生成されます。
version: 8
name: Empty Style
metadata:
maputnik:renderer: mlgljs
sources:
v:
type: vector
tiles:
- https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf
minzoom: 0
maxzoom: 4
sprite: ''
glyphs: https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf
layers:
- !!inc/file layers/coastl.yml
- !!inc/file layers/landmass.yml
- !!inc/file layers/riverl.yml
id: dsyugj9
layers:の部分でこのレイヤに関するファイルの関連付けを行っているようです。以下がそれぞれのレイヤのYAMLファイルです。
id: coastl
type: line
source: v
source-layer: coastl
maxzoom: 5
id: landmass
type: fill
source: v
source-layer: landmass
maxzoom: 5
paint:
fill-color: rgba(195, 176, 176, 1)
id: riverl
type: line
source: v
source-layer: riverl
maxzoom: 5
paint:
line-color: blue
line-width: 2
ブラウザでのリアルタイム編集
YAMLファイルを編集するにあたって、ブラウザに地図を表示させながら編集できると、結果を確認しながら作業が出来るので非常に便利です。そのような機能がcharitesには備わっており、コマンドは以下です。
charites serve download_style.yml
以下のような地図が表示されました。
レイヤをオン・オフで切り替えられるのも便利ですね。
では、スタイルを少し変更してみましょう。
riverl.yml：line-colorをblue → greenに変更
landmass.yml：fill-colorを rgba(195, 176, 176, 1) → rgba(50, 50, 50, 1)に変更
地図を表示してみると、リアルタイムで以下のように変化しました。
リアルタイムで変化を見られるので、スタイルの確認に便利ですね。
serveを終わらせるにはコンソールで「Ctrl+c」とします。
YAMLファイルからJSONファイルへ変換
最後にYAMLファイルからJSONファイルへ変換します。こうすることで、MapLibre GL JSなどのスタイルファイルとして再度使用することが出来ます。
charites build download_style.yml download_style2.json
とすると、download_style.ymlから以下のdownload_style2.jsonが生成されます。
{
"version": 8,
"name": "Empty Style",
"metadata": {
"maputnik:renderer": "mlgljs"
},
"sources": {
"v": {
"type": "vector",
"tiles": [
"https://k96mz.github.io/makeVectorTiles/Data/VTpractice/{z}/{x}/{y}.pbf"
],
"minzoom": 0,
"maxzoom": 4
}
},
"sprite": "",
"glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "coastl",
"type": "line",
"source": "v",
"source-layer": "coastl",
"maxzoom": 5
},
{
"id": "landmass",
"type": "fill",
"source": "v",
"source-layer": "landmass",
"maxzoom": 5,
"paint": {
"fill-color": "rgba(50, 50, 50, 1)"
}
},
{
"id": "riverl",
"type": "line",
"source": "v",
"source-layer": "riverl",
"maxzoom": 5,
"paint": {
"line-color": "green",
"line-width": 2
}
}
],
"id": "dsyugj9"
}
先ほど変更した箇所が正常に反映されていますね。ちなみに、YAMLファイルにおいて#でコメントアウトした箇所もありましたが、その部分は無視されてJSONファイルに変換されています。
MapLibre GL JSで表示してみるとこのような地図になります。
まとめ
charitesでベクトルタイルをスタイリングしてみました。始めてcharitesを使用してみましたが、インストールから使用方法まで簡単で使いやすいです。これからは、Maputnikとともにベクトルタイルのスタイリングに利用していこうと思います。
Reference