フレームワーク単位？ 地図サービス単位？

Lint needs to be added in order to format source code easily and effectively.

charites style build

charites style build

It will build style.json files from settings of config.yml

Options

• --compact-output minify output JSON file.

We can just run charites style build which use settings in config.yml or charites style build <source> [destination] like the sample below. The default [destination] value is build/.

charites style build style.yml style.json

Initializing a project

charites init <project_dir>

First, charites init command will create a charites project named as <project_dir> as follows.

Options

• --tilejson-urls <tilejson_urls> an URL for TileJSON.
• --metadatajson-urls <metadatajson_urls> an URL for metadata.json.
• --composite-layers a single YAML will be generated with multiple layers.
• --header add http header for the tile authenticated by origin. (ex. --header "Origin: http://localhost:8080")

project-directory/
├── style.yml - root style file
├── config.yml - configuration file to manage all folder paths and necessary settings for producing style.json
├── layers/ - style.yml for layers
├── icons/  - original SVG icons folder for sprite
├── fonts/ - original font files folder for glyphs.
└── public/ - folder for the files that ready to deploy.
    ├── style.json
    ├── icons.json
    ├── icons.png
    ├── [email protected]
    ├── [email protected]
    └── glyphs files(.pbf?) - sorry I need research what type of file used for glyphs.

version: version of charites used
serve:
  port: 8080
style:
  build:
    yaml-path: ./style.yml
    json-path: ./public/style.json
    compact-output: false
sprite:
  build:
    icons-folder: ./icons
    sprite-folder: ./public/sprite
    name: icons
glyphs:
  build:
    fonts-folder: ./fonts
    glyphs-folder: ./public/glyphs

It requires to create issue template for followings:

• Bug
• Feature

https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Currently we can not create style template for tile.json that origin authentication is applied.

So, I think we should add --origin-header option for init command.

charites init style.yml --tilejson-urls https://tileserver.com/tiles.json?key=YOUR-API-KEY --origin-header http://localhost:8080

プレビュー画面において作業中に、

• レイヤーは何があるのか
• どのレイヤーを触ると何が変わるのか

を知りたい。
提案としては、プレビュー画面にレイヤーの一覧が掲載されており、レイヤー名をクリックすると、対象の地物等が少し大きくなって光る（薄くなる？）ようなことができると、インスピレーションが浮かびやすくなる。

charites import

charites import <source> [destination]

• The<source> is JSON file to import.
• [destination] is name of project directory

Create charites project files from exist style.json

Options

• --composite-layers a single YAML will be generated with multiple layers.

charites import style.json my-project

Then we will get the same result of charites init (ex, style.yml, config.yml, layers/).

Warm greetings.

Today, I found an issue.
If there is a "/" in any layer id, we see "the permission denied" and the "convert" command does not work. (See attached image.)

I think this is because the layer "id" will be the name of each layer's yml file.

But, if we look at the style file from ArcGIS series, we may see a lot of "/" in layers' id.
Do you think is there any way to overcome this issue?
Otherwise, the charites will not be used to import a style file from ESRI sometimes.

Thank you for your kind attention and kind advice!

(FYI) An default style of Esri Living Atlas
https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer/resources/styles/root.json

I created ~/.charites/config.yml, then I run the command

charites serve style.yml

and terminal shows the error message below

EEXIST: file already exists, mkdir '/Users/naoppy/.charites'

When I use mapbox style with charites serve style.yml --provider mapbox --mapbox-access-token my-access-token

It will display error in console in debug tool of Google Chrome.

evented.js:140 Error: An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes
    at ajax.js:183

Is your feature request related to a problem? Please describe.
Currently, charites's CLI only has English interface. It might be difficult for other languages' users to use charites even though we have implemented i18n for documentation.

Describe the solution you'd like
Introduce i18n together with transifex.
We may be able to use transifex-javascript packages though I am not so sure transifex with Javascript. This NPM packages look like good.

Is your feature request related to a problem? Please describe.
The current README on the main branch is different from the version of charites published on npm.

If you are a new user and follow the steps in the GitHub README and use the charites on npm, it may not work due to the difference in versions.

Describe the solution you'd like
I think the oneway to solve this problem is creating documentation at the wiki.

https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/setting-guidelines-for-repository-contributors

This might be related to #29.

Combination of multiple style.json can be done manually, however currently there is no easy way to merge multiple source of sprite into a single sprite unless we generate sprite files from original SVG icons.

It would be great if charites have a feature to merge multiple sprite files although I am not very sure whether it is possible technically...

Add global option -v, --version to output installed version of charites

Add the command to duplicates a new layer based on an existing layer. Also, it's better to have an option to create a template layer file.

Command might be like

$ charites copy old-layer.yml new-layer.yml
or
$ charites add-layer --copy old-layer.yml

Related:

• https://github.com/wp-cli/wp-cli/blob/master/features/cli.feature

Warm greetings!
Do you have any recommendation on the charites environment?

It seems that charites work well on OSX and Ubuntu.
In windows environment, I am using charities on Docker (unvt/nanban).

It would be helpful if you can explain these recommended environment at the "install" section of the readme.
What do you think?

Thank you for your attention!

@naogify Could you release current main branch as v0.1.3, then we can create new branch for v1 to start implementing new CLI interface.

It is desirable to be able to maintain both icons and styles in a single project.

See:
https://www.npmjs.com/package/@maplibre/maplibre-gl-style-spec?activeTab=readme

charites serve

charites serve

It will automatically launch server with http://localhost:8080.

Options

• --port <custom port> number of custom port

• realtime style editing

After entering project directory, just run charites serve, it will automatically launch server with http://localhost:8080.

cd <project_dir>
charites serve

• It should build sprite and glyphs in realtime.
• the sprite and glyphs url in style.json is replace to the url start with http://localhost:8080/.

• https://github.com/mapbox/tilejson-spec
• https://github.com/mapbox/mbutil

--watch オプションを付けることで、ブラウザが起動し、保存を watch してライブリロードさせたい。

😊

Related to #36 (comment)

Regarding sprites, are we using file names of the .svg files as the name of the sprite?

We might want to think about sprite.yml file which assign sprite name to each sprite graphics. sprite.yml might look like:

airport: https://example.com/somewhere/airport.svg
branch: ./icons/gsi-icon.svg

I think sprite.yml will be helpful because it would always be good to optimize the size of sprite file. By introducing sprite.yml we can promote nicely customized sprites.

例えば、basic の landcover-wood や landcover-grass など少し濃い/薄い色が欲しいケースは多いと思います。

RGBの各色を10%ずつ増やせば色を薄く、10%ずつ減らせば色を濃くできるので、

$grassColor: rgb(216, 232, 200)
$forestColor: $grassColor * 1.1

のように指定できると色を変更するときも簡単になります。

We may want to add a feature to generate an HTML document, instead of style.json, from a Charite YAML description.

This will help vector tile users to understand the specifications of the style.

When I run the command,

charites init style.yml --metadatajson-urls https://tileserver.example.com/metadata.json

then it shows error message.

error: missing required argument '--tilejson-urls'

Is your feature request related to a problem? Please describe.

Currently, only http://localhost:8080 is supported by charites serve.

I would like to use another port if the port is already in use, since I want to use multiple charites serve or tileservergl and charites serve together.

Describe the solution you'd like
If the port is already in use, I want the port number to be incremented.

If we can generate an HTML document from metadata.json from Tippecanoe, it would help style designers to understand the design of the vector tiles given.

It requires to implement i18n together with Transifex in order to translate documentation in multiple languages after this PR (#78) will be merged.

References

• Sphinx internationalization: https://www.sphinx-doc.org/en/master/usage/advanced/intl.html
• Github Actions for transifex: https://github.com/marketplace/actions/github-transifex-actions
• Example existing implementation
  • lizmap-documentation
  • QField-docs

@ubukawa @hfu ドキュメントのPR#78がマージされたのち、Transifexでcharitesのドキュメントのi18n対応を行いたいのですが、Transifex内で組織を作る必要があります。私の方でunvtという組織を作ってしまっていいでしょうか？その後、おふたりに管理者としてインビテーションを送りたいと思います。Transifexのアカウントはお持ちですか？

Sorry, I mistook implementation of charites init --metadatajson-urls

When charites import from metadata.json, currently same url of metadata.json will be inserted into style.yml.

We have to change URL with zoom and x index and y index.

- https://optgeo.github.io/kokoromi-rw/zxy/metadata.json
+ https://optgeo.github.io/kokoromi-rw/zxy/{z}/{x}/{y}.pbf

I am thinking how charites can provide better experience of style making to users.

Thus, I thought some idea of new command line interface design.
Currently, there are a lot of options for each commands, I don't think it is user friendly, especially for Mapbox style beginners. I was trying to simplify command line interface by introducing configuration files instead of adding many optional parameters.

I just put them on this issue to discuss for better command line interface design.

@ubukawa @hfu @miya0001 @naogify What do you think about this draft design?

• Initializing a project

cd <project_dir>
charites init style.yaml --tilejson-urls <tilejson-urls> --metadatajson-urls <metadatajson-urls>

First, charites init command will create a charites project under <project_dir> as follows.

|_ layers - style.yml for layers
|_ icons - original SVG icons folder for sprite
|_ sprite - final sprite files from SVG
config.yml - configuration file to manage all folder paths and necessary settings for producing style.json
style.yml - root style file

config.yml can have following settings.

version: version of charites used
style:
  yaml-path: ./style.yml
  json-path: ./style.json
sprite:
  icons-folder: ./icons
  sprite-folder: ./sprite
  sprite-url: http://unvt.github.io/charites/sprite # this URL can be used final style.json file for production

• build style.json file from project's config.yaml

You can move to project directory and just run charites build or charites build config.yaml to convert yaml to style.json and sprite files.

cd <project_dir>
charites build

When charites build sprite files, it will create them which are used in style.yaml files.

• realtime style editing

After entering project directory, just run charites serve, it will automatically launch server with http://localhost:8080.

cd <project_dir>
charites serve

• convert existing style.json to style.yaml

If you run command like below with project folder path, it will create style.yaml and config.yaml in specified project folder. All of settings can be stored under a folder.

charites convert style.json <project folder>

• create sprite file from all icons under a folder

Current sprite generate is to make sprite files from all icons under a specific folder. This function can be moved to independent command like below.

charites sprite <icons_folder> <sprite folder>

This command is useful if all style including icons was already configured. However, user have to edit sprite file path in config.yml after making sprite by this command

• build glyph file from font file

In the future, we may create a command to build glyph from font file.

charites font <font_file> <glyph folder>

Unit test for serve command is required.

たとえば jq とかに同様のオプションがあれば合わせる。

Describe the bug

When I run charites build style.yml style.json --sprite-input noExistDir --sprite-output noExistDir, I don't get any error message even if the directory specified in the --sprite-input and/or --sprite-output is missing.

To Reproduce

In the example below, noExistDir is a directory that does not exist.

charites build style.yml style.json --sprite-input icons --sprite-output noExistDir

charites build style.yml style.json --sprite-input icons --sprite-output noExistDir

Expected behavior

It should show error message.

Screenshots

Charites Version:

• Charites version: 0.1.3 (It is on main branch)

Desktop (please complete the following information):

• OS: Mac

It is better to have template for pull request

https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository

ライブプレビューで作業中に、変数名の一覧があると頭が整理されやすい。
クリックやマウスオーバーで、その変数が使われている箇所がハイライトされるとより嬉しい。

たとえば .charites みたいなファイルにデフォルトの緯度経度を保存できると一手間減る。

charites glyphs build

charites glyphs build

it will build glyph files from settings of config.yml.

We can just run charites glyphs build which use settings in config.yml or charites glyphs build <source> [destination] like the sample below. The default [destination] value is build/.

charites glyphs build font/ glyphs/

charites sprite build

charites sprite build

It will build icon sprite files from settings of config.yml

build icon sprite files (ex, icons.png, icons.json) from svg files.

Options

• --name <sprite file name> sprite file name. (ex icons)

We can just run charites sprite build which use settings in config.yml or charites sprite build <source> [destination] like the sample below. The default [destination] value is build/.

charites sprite build asset/ public/ --name icons

It might be convenient if charites can merge multiple style.jsons into a single style.json or yml.

CI の組み込みをする。

Describe the bug
If you run convert in a Windows environment, you will get unwanted single quotes in the layers section.
This will cause the build to fail.

To Reproduce
Steps to reproduce the behavior:

1. curl https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json | charites convert - style.yml
2. charites build style.yml style.json
3. See error

Expected behavior
Make the output the same as when you convert in a Linux environment.
Remove the single quotes and it works fine.

Screenshots

convert style.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'

Charites Version:

• Charites version: 0.1.2

Desktop (please complete the following information):

• OS: Windows 10

This idea was come from @hfu at #65 (review)

I think it's useful to add background.yml when we run charites init.

Example of background.yml (We can consider other color for background-color)

id: background
type: background
paint: 
  background-color: "#FF0000"

When I preview a map with charites serve style.yml and try to zoom in the map. It shows "Use alt + scroll to zoom the map" message. I think we can disable this function for the map development.

For your future consideration, I want to share my idea.
(This is JUST for your information ;D)

I just thought it would be useful if we could have an option to add tile boundaries and collision boxes for styling work when the charites serves the live preview..
Specifically, we could have an option to add the following two lines somewhere in the app.js.

map.showTileBoundaries = true;
map.showCollisionBoxes = true;

If so, we can see the tile boundary and collision boxes during our style editing work.
(It will be optional.)

Thank you for your attention.
I wish I could develop such function by myself...