LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k96mz

coesite4レポジトリを作成する

Last updated at Posted at 2025-04-01

はじめに

本記事では、cosite3レポジトリからcoesite4レポジトリに移行するにあたっての変更点について解説します。
coesite4レポジトリのテスト版はこちらにあります。

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

上記の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に修正したあとのファイルは以下です。

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のファイルにタイプミスがあることを発見したので、修正します。

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

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

MapLibreライブラリの更新

こちらの記事を見ながら、最新版の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
について、

<script src='./maplibre-gl@2.4.0/maplibre-gl.js'></script>
<link href='./maplibre-gl@2.4.0/maplibre-gl-r.css' rel='stylesheet' />

の記載を以下に変更します。

<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
となっていることに注意します。

こちらの記事に違いが記載されています。

Watergisライブラリの更新

こちらの記事のように以前はダウンロード出来ていたようですが、今は出来ないと思っていました。しかし、exportについてはこちらのページのCDNタブ、legendについてはこちらのページを参考にすることで、ダウンロード出来ることが分かりました。legendについては、unpkgのページはこちらです。

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のみ）
について、

<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>

の記載を以下に変更します。

<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

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

上記を以下に修正します。

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 の方も同様です。

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

上記を以下に修正します。

const LegendModule = window.MaplibreLegendControl;

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

不必要なファイル・記載の削除

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

config/default-0.hjson

こちらのファイルについては、こちらの記事にある通り、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の以下の部分を削除します。

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」以下の部分は削除します。

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に修正します。

views/index.hbs
  <h1>Unite Map powered by UN Vector Tile Toolkit.</h1>

「(Dev)」と「please login to the geoportal as well.」についても削除します。

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

以下の通り変更します。
◯現状

  • UNVT test siteをクリックすると、GeoPortalにリンク
  • UNVT Homeをクリックすると、UNVT Homeがリロード
  • MapをクリックするとMapboxを利用した地図へリンク

◯変更後

  • 「UNVT test site」 の記載を 「UNVT Home」として、UNVT Homeがリロード
  • 「UNVT Home」の記載を「UN GeoPortal」として、GeoPortalにリンク
  • MapをクリックするとMapLibreを利用した地図へリンク
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

以下の記載を削除します。

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）

こちらのサイトに記載されている文言が使用されているようですので、このままで問題ないと思われます。

シェルスクリプト

pmreload.sh
pmserve.sh
pmstop.sh
restart-coe.sh

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

pmreload.sh
sudo pm2 reload --update-env coesite4;
pmserve.sh
sudo pm2 stop coesite4;
sudo pm2 delete coesite4;
sudo pm2 start app.js --name coesite4;
sudo pm2 monit;
pmstop.sh
sudo pm2 stop coesite4;
sudo pm2 delete coesite4;
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レポジトリを作成する

まずは、作成したテストレポジトリをクローンしてローカルに保存します。フォルダ名はcoesite4とします。

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

こちらのレポジトリが作成したものです。

まとめ

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

Reference

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?