Introduction

This is the material for technical session on 2023-03-20.
The purpose is to understand style editing process with unvt/charites.

Environment

We are working at our DEV environment. We use our hosting server in DEV env.

RHEL
nodejs: v16.19.0
unvt/charites: 0.4.0

Target

We are editing our styles with unvt/charites. This time, the target of the practice is the style.json (root.json) for Esri service. We will dowonload the style file and import it as YAML files.

For our APP with MapLibre, you may also refer the following files.
https://github.com/ubukawa/styles/tree/main/style-prod

Procedure

Step 1. Making the work directory

Login to the server (if you want to work on the server), and prepare a directory for this work.

mkdir 2023-03-20
cd 2023-03-20

Step 2. Import the current style and adjust its source

Make sure that you can access to the hosting server in DEV.
We will see the style file (json) and pipe it into charites (convert) to obtain the style in yaml files.

curl https://dev-geoportal.dfs.un.org/unvt/esriIF/UniteStreetMapVector/VectorTileServer/resources/styles/root.json | charites convert - esri/style.yml

You may replace the input file if you want. In this case, imported files are stored in the "esri" directory.

The "esri" directory that contains yaml files. We copy it as "esri-edit" to further edit.

cp -r esri esri-edit
cd esri-edit

Edit the source "v" in the imported style.yml.
Esri uses "url" for its tile server, but our styling tool does not understand index.json based on ArcGIS REST APIT. Please use direct URL of tiles. So, add "tiles" there. Then, you are ready for the live preview.
(It is also important to pay attention on the order of z-x-y. If the tile is from ESRI server, it is often z-y-x.)

Step 3. Run live preview

You can start live preview with the following command. The live preview is through http protocol, not https. Note that the port can be specified as you like.

charites serve --port 8836 style.yml

Access (http) to the server via the port specified. We can see the map.

If you edit any YAML file that is included in the preview, you will see the change in the live preview map.

You can do the same thing on your local machine (with windows Powershell, please use curl.exe instead of curl).

Tips 1: Use WinSCP or other tool if you work on the DEV server.

Editing text or chaning the folder structure in DEV is difficult. Use WinSCP or other tool for easy editing.

Because YAML file editing would be easiler in windows, it would be a good idea that you work on your local environment.

Tips 2: Make use of a good folder structure

It would be helpful if you stored eash layer YAML file in respective directory for grouping. (When you move a yaml file for ceratin layer, make sure that you edit the path to that file in style.yml.)

Tips 3: Including the reference to YAML file

For a common element that appears many times, we can use "!!inc/file xxx.yml".
This will help us, in the future, to efficiently manage common elements.

Step 4. Export YAML files into JSON.

Please run "charites build" command.