Styling with unvt/nanban - for practice

# 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.
```bash
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.

```bash
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.

```bash
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.)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/8e8d5809-5558-2b76-43c6-553a44bc48eb.png)


## 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.
```bash
charites serve --port 8836 style.yml
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/b274dfd2-53c3-b0c7-8d7e-cff893ea3841.png)

Access (http) to the server via the port specified. We can see the map.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/129c7dbe-3515-33ab-3321-27362be1f0c2.png)

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.)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/b53a6cda-2e45-3bf4-7b19-f449c87c3d7a.png)


### 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.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/b4609ca8-824b-4e64-f0a0-59d1790e4c3d.png)


## Step 4. Export YAML files into JSON.

Please run "charites build" command.