coesite4レポジトリを作成する

# はじめに
本記事では、[cosite3レポジトリ](https://github.com/unvt/coesite3)からcoesite4レポジトリに移行するにあたっての変更点について解説します。
coesite4レポジトリのテスト版は[こちら](https://github.com/k96mz/20250319coesite4test)にあります。


# coesite3のクローン
まずは、coesite3をローカルにクローンします。


# package.jsonファイルの修正
package.jsonファイルの修正をおこなっていきます。

## モジュールの削除
まずは、不要なモジュールの削除作業からです。以下のモジュールは使用していないと思われるため、package.jsonファイルから削除しておきます。

debug
express-validator
fs
https
moment
moment-timezone
uuid
windows-iana

fsとhttpsは標準モジュールなので、削除しても問題ありません。

## モジュールのアップデート
以下のモジュールはそれぞれ、アップデートします。

```
Package                    Current  Latest
@azure/msal-node            1.18.4   3.3.0
dotenv                      10.0.0  16.4.7
express-mysql-session        2.1.8   3.0.3
http-errors                  1.8.1   2.0.0
winston-daily-rotate-file    4.7.1   5.0.0
```

:::note info
上記のCurrentは、coesite3に記載されたバージョンではなく、実際に使用さているバージョンです。つまり、package.jsonのexpress-mysql-session は^2.1.7と記載されていますが、マイナーバージョンやパッチバージョン（2.x.x）には自動的に更新可能なので、実際には2.1.8がインストールされています。
:::

あとで気付きましたが、
express-mysql-sessionは、3.0.3 
だと、MSALの認証時にログインできないエラーが発生するので、^2.1.7
のまま使用します。

## 変更後のpacakge.json
coesite3の3を4に修正したあとのファイルは以下です。

```json: pacakge.json
{
  "name": "coesite4",
  "version": "0.0.0",
  "description": "A vector tile server",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/unvt/coesite4.git"
  },
  "dependencies": {
    "@azure/msal-node": "^3.3.0",
    "@mapbox/mbtiles": "^0.12.1",
    "@microsoft/microsoft-graph-client": "^3.0.0",
    "config": "^3.3.6",
    "connect-flash": "^0.1.1",
    "cookie-parser": "~1.4.4",
    "cors": "^2.8.5",
    "dotenv": "^16.4.7",
    "express": "^4.17.1",
    "express-mysql-session": "^2.1.7",
    "express-promise-router": "^4.1.0",
    "express-session": "^1.17.2",
    "hbs": "^4.1.2",
    "hh-mm-ss": "^1.2.0",
    "hjson": "^3.2.2",
    "http-errors": "^2.0.0",
    "isomorphic-fetch": "^3.0.0",
    "morgan": "^1.10.0",
    "spdy": "^4.0.2",
    "winston": "^3.3.3",
    "winston-daily-rotate-file": "^5.0.0"
  }
}
```

# ArcGIS onlineでの地図表示に関するコード修正

/esri/UniteStreetMapVector/index.json
のmaxLODを0から15に変更します。

/esri/UniteStreetMapVector/style.jsonのurlを以下に変更します。
https://dev-geoportal.dfs.un.org/unvt/rest/services/esriIF/UniteStreetMapVector/VectorTileServer

app.jsについて、以下のように設定します。
app.use("/unvt/rest/services/esriIF", esriIFRouter);

# タイプミスの修正
views/map-l.hbs、views/webmap-l.hbs、views/webmap-3d.hbsのファイルにタイプミスがあることを発見したので、修正します。

``` hbs:
<div id='map'"></div>
上記を以下に修正
<div id="map"></div>

maxZoom: 0, // min zoom
上記を以下に修正
minZoom: 0, // min zoom
```

# MapLibreライブラリの更新
[こちらの記事](https://qiita.com/k96mz/items/00221897215315841e8b#2-1-maplibre-gl-js-%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)を見ながら、最新版のMapLibreライブラリをダウンロードします。

2025年4月1日現在の最新版は5.3.0のようです。

publicフォルダで以下を実行します。
```
mkdir maplibre-gl@5.3.0
cd maplibre-gl@5.3.0
curl -O https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js
curl -O https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.js.map
curl -O https://unpkg.com/maplibre-gl@5.3.0/dist/maplibre-gl.css
curl -O https://unpkg.com/maplibre-gl@5.3.0/dist/LICENSE.txt
```

views/map-l.hbs、
views/webmap-l.hbs、
views/webmap-3d.hbs
について、
```html
<script src='./maplibre-gl@2.4.0/maplibre-gl.js'></script>
<link href='./maplibre-gl@2.4.0/maplibre-gl-r.css' rel='stylesheet' />
```
の記載を以下に変更します。
```html
<script src='./maplibre-gl@5.3.0/maplibre-gl.js'></script>
<link href='./maplibre-gl@5.3.0/maplibre-gl.css' rel='stylesheet' />
```

ここで、
maplibre-gl-r.css
から
maplibre-gl.css
となっていることに注意します。

[こちらの記事](https://qiita.com/k96mz/items/9a191ee7881f7bf9f07e#maplibre-glcss%E3%81%A8maplibre-gl-rcss%E3%81%AE%E9%81%95%E3%81%84)に違いが記載されています。


# Watergisライブラリの更新
[こちらの記事](https://qiita.com/T-ubu/items/5092eabb6d1dae3cc6e4#2-2-export%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A8legend%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)のように以前はダウンロード出来ていたようですが、今は出来ないと思っていました。しかし、exportについては[こちらのページ](https://maplibre-gl-export.water-gis.com/)のCDNタブ、legendについては[こちらのページ](https://github.com/watergis/maplibre-gl-legend/blob/main/packages/maplibre-gl-legend/CHANGELOG.md)を参考にすることで、ダウンロード出来ることが分かりました。legendについては、unpkgのページは[こちら](https://www.unpkg.com/browse/@watergis/maplibre-gl-legend@2.0.5/dist/)です。


public/watergisフォルダで以下を実行します。

```
# maplibre-gl-export
mkdir maplibre-gl-export@4.0.1
cd maplibre-gl-export@4.0.1
curl -O https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-export@4.0.1/dist/maplibre-gl-export.umd.js
curl -O https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-export@4.0.1/dist/maplibre-gl-export.css
curl -O https://cdn.jsdelivr.net/npm/@watergis/maplibre-gl-export@4.0.1/LICENSE

# maplibre-gl-legend
mkdir maplibre-gl-legend@2.0.5
cd maplibre-gl-legend@2.0.5
curl -O https://www.unpkg.com/@watergis/maplibre-gl-legend@2.0.5/dist/maplibre-gl-legend.umd.js
curl -O https://www.unpkg.com/@watergis/maplibre-gl-legend@2.0.5/dist/maplibre-gl-legend.css
curl -O https://www.unpkg.com/@watergis/maplibre-gl-legend@2.0.5/LICENSE
```




views/webmap-l.hbs、
views/webmap-3d.hbs（こちらは、legendのみ）
について、
```html
<link href='./watergis/maplibre-gl-export@1.3.6/maplibre-gl-export.css' rel='stylesheet' />
<script src='./watergis/maplibre-gl-export@1.3.6/maplibre-gl-export.js'></script>
<link href='./watergis/maplibre-gl-legend@1.2.7/maplibre-gl-legend.css' rel='stylesheet' />
<script src='./watergis/maplibre-gl-legend@1.2.7/maplibre-gl-legend.js'></script>
```
の記載を以下に変更します。
```html
<link href='./watergis/maplibre-gl-export@4.0.1/maplibre-gl-export.css' rel='stylesheet' />
<script src='./watergis/maplibre-gl-export@4.0.1/maplibre-gl-export.umd.js'></script>
<link href='./watergis/maplibre-gl-legend@2.0.5/maplibre-gl-legend.css' rel='stylesheet' />
<script src='./watergis/maplibre-gl-legend@2.0.5/maplibre-gl-legend.umd.js'></script>
```


しかし、バージョンアップに伴い、アイコンが表示されませんでしたので、同様に２つのファイルについて以下の修正をします。
Maplibre GL Export v4 以降では、グローバル空間に直接クラスは出てこないためのようです。

### maplibre-gl-export
```js
map.addControl(new MaplibreExportControl({
  PageSize: Size.A4,
  PageOrientation: PageOrientation.Portrait,
  Format: Format.PNG,
  DPI: DPI[96],
  PrintableArea: true,
  Local: 'en'
}), 'top-right');
```
上記を以下に修正します。

```js
const ExportModule = window.MaplibreExportControl;

map.addControl(new ExportModule.MaplibreExportControl({
  PageSize: ExportModule.Size.A4,
  PageOrientation: ExportModule.PageOrientation.Portrait,
  Format: ExportModule.Format.PNG,
  DPI: ExportModule.DPI[96],
  PrintableArea: true,
  Local: 'en'
}), 'top-right');
```

### maplibre-gl-legend
legend の方も同様です。

```js
map.addControl(new MaplibreLegendControl({}, {
   showDefault: false,
   onlyRendered: true,
   reverseOrder: false
}), 'bottom-left');
```
上記を以下に修正します。

```js
const LegendModule = window.MaplibreLegendControl;

map.addControl(new LegendModule.MaplibreLegendControl({}, {
   showDefault: false,
   onlyRendered: true,
   reverseOrder: false
}), 'bottom-left');
```


# 不必要なファイル・記載の削除
coesite3には使用していないファイル・記載が複数存在しており、分かりづらいため削除していきます。

### config/default-0.hjson
こちらのファイルについては、[こちらの記事](https://qiita.com/T-ubu/items/f7147def371b49cb232c#config%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%81%AE%E3%81%AA%E3%81%8B%E3%81%ABdefault-0hjson%E3%81%A8%E3%81%84%E3%81%86%E7%A9%BA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B)にある通り、PM2実行時にエラーが発生することがあるとのことなので、このまま置いておきます。削除しても問題なく動作するようなら後で削除しようと思います。

### esri/ne-test
こちらのフォルダとその下にあるindex.json、style.jsonは使用していないので、削除します。

### publicフォルダ
publicフォルダの下にある以下のフォルダやファイルは使用していないので削除します。
- maplibre-gl-compare
- maplibre-gl@2.2.1
- maplibre-gl@2.4.0
- sprite_un
- styles/old
- styles/store style here.txt
- styles/style-std-old.json
- styles/style-test.json
- watergis/maplibre-gl-export@1.3.6
- watergis/maplibre-gl-export@1.3.8
- watergis/maplibre-gl-legend@1.2.7
- watergis/maplibre-gl-legend@1.2.8
- mapbox-gl_r.css
- mapbox-gl.js
- mapbox-gl.js.map
- maplibre-gl.css
- maplibre-gl.js
- maplibre-license.txt
- bundle.js


LICENSE of Mapbox gl js.txt
については、@mapbox/mbtilesモジュールを使用している場合には必要なようですので、残しておきます。

### routesフォルダ
routesフォルダの下にある以下のファイルは使用していないので削除します。
- map.js
- users.js（レスポンスのテスト用にあるようですが削除することにします）
- webmap.js


### viewsフォルダ
viewsフォルダの下にある以下のファイルは使用していないので削除します。
- map.hbs
- webmap.hbs

index.hbsの以下の部分を削除します。
```html: views/index.hbs
<ol>
<li><a href="map">Simple Web Map APP </a> with Mapbox-gl.js version 1</li>
<li><a href="./webmap">Web Map APP (Testing)</a> - with several Mapbox plugins</li>
</ol>
```

index.hbsの以下の部分のバージョン番号とパスを修正します。「ESRI interface URL」以下の部分は削除します。
```html: views/index.hbs
<li><a href="map-l">Simple Web Map APP</a> with MapLibre-gl.js version 5.3.0</li>
<li><a href="./webmap-l">Web Map APP (3 styles)</a> - with several MapLibre plugins</li>
<li><a href="./webmap-3d">Web Map APP - 3D (Testing)</a> - with MapLibre version 5.3.0</li>

ESRI interface URL:<br>
<ol>
<li>https://dev-unvt.dfs.un.org/unvt/rest/services/esriIF/UniteStreetMapVector/VectorTileServer</li>
</ol>
```

Unite MapをUN Mapsに修正します。
```html: views/index.hbs
  <h1>Unite Map powered by UN Vector Tile Toolkit.</h1>
```


「(Dev)」と「please login to the geoportal as well.」についても削除します。
```html: views/index.hbs
<h4>Map in Geoportal (Dev)</a></h4>
<ol>
  <li><a href="">Link to the Geoportal (Please revise)</a>. please login to the geoportal as well.</li>
</ol>
```



layout.hbsについても検討しました。

![スクリーンショット 2025-03-27 9.20.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/f9c06a61-91a5-454e-bfe6-8d0ba7e05d81.jpeg)

以下の通り変更します。
◯現状
- UNVT test siteをクリックすると、GeoPortalにリンク
- UNVT Homeをクリックすると、UNVT Homeがリロード
- MapをクリックするとMapboxを利用した地図へリンク

◯変更後
- 「UNVT test site」 の記載を 「UNVT Home」として、UNVT Homeがリロード
- 「UNVT Home」の記載を「UN GeoPortal」として、GeoPortalにリンク
- MapをクリックするとMapLibreを利用した地図へリンク


```html: views/layout.hbs
<a href="/unvt/" class="navbar-brand">UNVT Home</a>

<a href="/" class="nav-link{{#if active.home}} active{{/if}}">UN GeoPortal</a>

<a href="/unvt/map-l" class="nav-link active">Map</a>
```

 {{#if active.home}} ... {{/if}} については、active.home が truthy（trueのような値） のときだけ、active という文字列を挿入するという意味で、Bootstrapのスタイルにより変更するはずですが、実際には変わりませんでした。本当は、きちんと修正したいった方がよいでしょうが、とりあえずこのまま放置しておきます。

### .gitignore
以下の記載を削除します。
esri/UniteStreetMapVector-open


### app.js
以下の記載を削除します。
```js
var usersRouter = require('./routes/users')
var mapRouter = require('./routes/map') //test 0104
var webmapRouter = require('./routes/webmap') //test 0104

app.use('/unvt/users', usersRouter)
app.use('/unvt/map', mapRouter)
app.use('/unvt/webmap', webmapRouter)
```

### License(microsoft）
[こちらのサイト](https://github.com/microsoftgraph/msgraph-sample-nodeexpressapp/blob/main/LICENSE)に記載されている文言が使用されているようですので、このままで問題ないと思われます。


### シェルスクリプト
pmreload.sh
pmserve.sh
pmstop.sh
restart-coe.sh

上記4つのファイルについて、coesite3をcoesite4に変更し、パスなどについても変更しました。

```sh: pmreload.sh
sudo pm2 reload --update-env coesite4;
```

```sh: pmserve.sh
sudo pm2 stop coesite4;
sudo pm2 delete coesite4;
sudo pm2 start app.js --name coesite4;
sudo pm2 monit;
```

```sh: pmstop.sh
sudo pm2 stop coesite4;
sudo pm2 delete coesite4;
```

```sh: restart-coe.sh
cd /hoge/coesite4;
sudo pm2 stop coesite4;
sudo pm2 delete coesite4;
sudo pm2 start app.js --name coesite4;
```

### README.md
以下の点を修正しました。

◯coesite3 →　coesite4
（タイトルとinstallの部分）

◯environmentのバージョンの変更
I developed this nodejs server for Red Hat Enterprise Linux release 9.5.  
Nodejs v22.14.0
npm 10.9.2
pm2 v6.0.5

# 実際にcoesite4レポジトリを作成する

まずは、作成した[テストレポジトリ](https://github.com/k96mz/20250319coesite4test)をクローンしてローカルに保存します。フォルダ名はcoesite4とします。

その後、GitHubで新しくcoesite4リポジトリを作成して、ローカルのコードをアップロードしました。
標高データの小縮尺データであるrgbElev/0-0-0.mbtilesの容量が 80.09 MBなので、警告が出来ましたが、問題なくアップロード出来ました。

[こちらのレポジトリ](https://github.com/unvt/coesite4
)が作成したものです。


# まとめ
本記事では、cosite3レポジトリからcoesite4レポジトリに移行するにあたっての変更点についてまとめました。

# Reference
https://qiita.com/k96mz/items/9a191ee7881f7bf9f07e

https://github.com/k96mz/20250319coesite4test

https://github.com/unvt/coesite4