@unvt/charites 0.5.1 → 0.5.4

package/.github/workflows/build.yml

@@ -16,8 +16,8 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
-        os: [ubuntu-latest, windows-latest]
+        node-version: [18.x, 20.x, 21.x]
+        os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
@@ -67,7 +67,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           tag_name: 'v%s'
-          node-version: '14.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@unvt'
       - run: npm install

package/dist/cli/serve.js

@@ -16,6 +16,7 @@ program
     .option('--provider [provider]', 'your map service. e.g. `mapbox`, `geolonia`')
     .option('--mapbox-access-token [mapboxAccessToken]', 'Your Mapbox Access Token (required if using the `mapbox` provider)')
     .option('-i, --sprite-input [<icon input directory>]', 'directory path of icon source to build icons. The default <icon source> is `icons/`')
+    .option('--sdf', 'Allows to use SDF sprite in charites')
     .option('--port [port]', 'Specify custom port')
     .option('--no-open', "Don't open the preview in the default browser")
     .action(async (source, serveOptions) => {
@@ -25,6 +26,7 @@ program
     options.port = serveOptions.port;
     options.spriteInput = serveOptions.spriteInput;
     options.open = serveOptions.open;
+    options.sdf = serveOptions.sdf;
     if (!fs_1.default.existsSync(defaultValues_1.defaultSettings.configFile)) {
         fs_1.default.writeFileSync(defaultValues_1.defaultSettings.configFile, `provider: ${options.provider || 'default'}`);
     }

package/dist/commands/serve.js

@@ -45,7 +45,7 @@ async function serve(source, options) {
                 typeof spriteOut === 'undefined') {
                 return;
             }
-            await (0, build_sprite_1.buildSprite)(options.spriteInput, spriteOut, 'sprite');
+            await (0, build_sprite_1.buildSprite)(options.spriteInput, spriteOut, 'sprite', options.sdf);
         };
         await spriteRefresher();
     }

package/dist/lib/build-sprite.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildSprite = void 0;
 const sprite_one_1 = require("@unvt/sprite-one");
 const path_1 = __importDefault(require("path"));
-async function buildSprite(svgPath, publicPath, iconSlug) {
+async function buildSprite(svgPath, publicPath, iconSlug, sdf = false) {
     const pxRatios = [1, 2];
     const outPath = path_1.default.join(publicPath, iconSlug);
-    await (0, sprite_one_1.generateSprite)(outPath, [svgPath], pxRatios);
+    await (0, sprite_one_1.generateSprite)(outPath, [svgPath], pxRatios, sdf);
     return;
 }
 exports.buildSprite = buildSprite;

package/dist/lib/get-sprite-slug.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSpriteSlug = void 0;
 function getSpriteSlug(style) {
-    var _a;
-    if (!style.hasOwnProperty('sprite')) {
+    if (!style.hasOwnProperty('sprite') || !style.sprite) {
         return false;
     }
-    const matchedUrl = (_a = style.sprite) === null || _a === void 0 ? void 0 : _a.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/);
+    const firstUrl = Array.isArray(style.sprite)
+        ? style.sprite[0].url
+        : style.sprite;
+    const matchedUrl = firstUrl.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/);
     if (!matchedUrl || !matchedUrl[2]) {
         return false;
     }

package/dist/lib/validate-style.js

@@ -1,7 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateStyle = void 0;
-const maplibreStyleSpec = require('@maplibre/maplibre-gl-style-spec');
+const maplibre_gl_style_spec_1 = __importDefault(require("@maplibre/maplibre-gl-style-spec"));
 const mapboxStyleSpec = require('@mapbox/mapbox-gl-style-spec');
 function validateStyle(style, provider = 'default') {
     let result = [];
@@ -9,12 +12,21 @@ function validateStyle(style, provider = 'default') {
         result = mapboxStyleSpec.validate(style);
     }
     else {
-        result = maplibreStyleSpec.validate(style);
+        result = maplibre_gl_style_spec_1.default.validateStyleMin(style);
     }
     const errors = [];
     for (let i = 0; i < result.length; i++) {
-        if (result[i].message) {
-            errors.push(result[i].message);
+        const msg = result[i].message;
+        if (msg) {
+            const layerMatch = msg.match(/^layers\[([0-9]+)\]/);
+            if (layerMatch) {
+                const layerIndex = Number(layerMatch[1]);
+                const layerId = style.layers[layerIndex].id;
+                errors.push(`Layer "${layerId}": ${msg}`);
+            }
+            else {
+                errors.push(msg);
+            }
         }
     }
     if (errors.length) {

package/docs/source/install/install.rst

@@ -1,6 +1,6 @@
 Install
 =======
-Make sure that npm and nodejs are installed. Nodeis version 14 or later version are recommended. Then, install charites by running the following command:
+Make sure that npm and nodejs are installed. Nodeis version 18 or later version are recommended. Then, install charites by running the following command:
 
 .. code-block:: bash
 

package/docs/source/install/installation_guide_for_windows.rst

@@ -15,13 +15,13 @@ Steps
 
 Step 1. Installation of nodejs (if it is not installed yet)
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-Check if nodejs is installed. If not, visit `nodejs <https://nodejs.org/en/>`_ to install them. Version 14 or later version is recommended. Installation will fail with the older version of nodejs than 12.20.0.
+Check if nodejs is installed. If not, visit `nodejs <https://nodejs.org/en/>`_ to install them. Version 18 or later version is recommended. Installation will fail with the older version of nodejs than 12.20.0.
 
 Step 2. Open Windows PowerShell
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Open Windows PowerShell and confirm if nodejs and npm works.
 
-.. code-block:: 
+.. code-block::
 
     npm --version
     node --version
@@ -30,7 +30,7 @@ Step 3. Install @unvt/charites as a npm package
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 Just rung the following command to install the charites.
 
-.. code-block:: 
+.. code-block::
 
     npm install -g @unvt/charites
 
@@ -39,7 +39,7 @@ Step 4. Confirm if charites is properly installed
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 If you can see the charites version and command lits with the following command. It seems that your installation has done successfully.
 
-.. code-block:: 
+.. code-block::
 
     charites --version
     charites --help

package/docs/source/install/recommended_environment.rst

@@ -3,4 +3,4 @@ Recommended environment
 
 Chrities may work well on OSX, Ubuntu, Windows 10 and Raspberry Pi.
 
-Nodejs and npm are needed to install charites. Docker can also be a good environment in Windows while WSL might work well. For charites version 0.3.0 released in December 2022, nodejs ver 14. or later version is recommended.
+Nodejs and npm are needed to install charites. Docker can also be a good environment in Windows while WSL might work well. For charites version 0.3.0 released in December 2022, nodejs ver 18. or later version is recommended.

package/docs/source/usage/commandline_interface.rst

@@ -98,6 +98,7 @@ Realtime editor on browser
     --mapbox-access-token [mapboxAccessToken]    Access Token for the Mapbox
     -i, --sprite-input [<icon input directory>]  directory path of icon source to build icons. The default <icon
                                                  source> is `icons/`
+    --sdf                                        Allows to use SDF sprite in charites
     --port [port]                                Specify custom port
     -h, --help                                   display help for command
 
@@ -112,4 +113,6 @@ Charites has three options for `serve` command.
 
 - ``--sprite-input`` - If you are building icon spritesheets with Charites, you can specify the directory of SVG files to compile here. See the ``build`` command for more information.
 
+- ``--sdf`` - if this option is used together with ``--sprite-input``, the viewer will generate SDF sprite. If the option is not specified, non SDF sprite will be generated.
+
 - ``--port`` - Set http server's port number. When not specified, the default is 8080.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvt/charites",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "description": "",
   "bin": {
     "charites": "dist/cli.js"
@@ -18,9 +18,9 @@
   "license": "MIT",
   "dependencies": {
     "@mapbox/mapbox-gl-style-spec": "^13.27.0",
-    "@maplibre/maplibre-gl-style-spec": "^17.0.2",
+    "@maplibre/maplibre-gl-style-spec": "^19.3.0",
     "@types/jsonminify": "^0.4.1",
-    "@unvt/sprite-one": "^0.0.9",
+    "@unvt/sprite-one": "^0.1.1",
     "axios": "^1.2.2",
     "commander": "^9.4.1",
     "glob": "^8.0.3",

package/provider/default/app.js

@@ -14,7 +14,7 @@
   map.addControl(new maplibregl.NavigationControl(), 'top-right')
 
   map.addControl(
-    new MaplibreLegendControl(
+    new MaplibreLegendControl.MaplibreLegendControl(
       {},
       {
         showDefault: true,

package/provider/default/index.html

@@ -3,10 +3,10 @@
   <head>
     <link rel="stylesheet" href="/app.css" />
     <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
-    <link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
+    <link href='https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.css' rel='stylesheet' />
     <title>Charites Live Preview</title>
     <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
-    <script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
+    <script src="https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.umd.js"></script>
     <script src="https://unpkg.com/pmtiles@2.7.0/dist/index.js"></script>
   </head>
   <body>

package/provider/default/shared.js

@@ -1,21 +1,23 @@
 ;(async () => {
   window._charites = {
     initializeWebSocket: function (map) {
-      const socket = new WebSocket(`ws://${window.location.host}`)
+      const isHttps = window.location.protocol === 'https:'
+      const wsProtocol = isHttps ? 'wss' : 'ws'
+      const socket = new WebSocket(`${wsProtocol}://${window.location.host}`)
 
       socket.addEventListener('message', (message) => {
         const data = JSON.parse(message.data)
         if (data.event === 'styleUpdate') {
-          map.setStyle(`http://${window.location.host}/style.json`)
+          map.setStyle(`//${window.location.host}/style.json`)
         } else if (data.event === 'spriteUpdate') {
-          map.setStyle(`http://${window.location.host}/style.json`, {
+          map.setStyle(`//${window.location.host}/style.json`, {
             diff: false,
           })
         }
       })
     },
     parseMapStyle: async function () {
-      const mapStyleUrl = `http://${window.location.host}/style.json`
+      const mapStyleUrl = `//${window.location.host}/style.json`
       const mapStyleRes = await fetch(mapStyleUrl)
       const mapStyleJson = await mapStyleRes.json()
 
@@ -40,8 +42,12 @@
             if (center === undefined) {
               const bounds = mapTileJson.bounds
               center = mapTileJson.center
-                ? mapTileJson.center
-                : [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2]
+              if (!center && bounds) {
+                center = [
+                  (bounds[0] + bounds[2]) / 2,
+                  (bounds[1] + bounds[3]) / 2,
+                ]
+              }
             }
             if (zoom === undefined) {
               zoom = (mapTileJson.minzoom + mapTileJson.maxzoom) / 2

package/provider/geolonia/app.js

@@ -12,7 +12,7 @@
   window._charites.initializeWebSocket(map)
 
   map.addControl(
-    new MaplibreLegendControl(
+    new MaplibreLegendControl.MaplibreLegendControl(
       {},
       {
         showDefault: true,

package/provider/geolonia/index.html

@@ -3,7 +3,7 @@
   <head>
     <link rel="stylesheet" href="/app.css" />
     <title>Charites Live Preview</title>
-    <link href='https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.css' rel='stylesheet' />
+    <link href='https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.css' rel='stylesheet' />
   </head>
   <body>
     <div class="overlay">
@@ -15,7 +15,7 @@
     </div>
     <div id="map"></div>
     <script type="text/javascript" src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"></script>
-    <script src="https://watergis.github.io/maplibre-gl-legend/maplibre-gl-legend.js"></script>
+    <script src="https://unpkg.com/@watergis/maplibre-gl-legend@2.0.0/dist/maplibre-gl-legend.umd.js"></script>
     <script type="text/javascript" src="/shared.js"></script>
     <script type="text/javascript" src="/app.js"></script>
   </body>

package/src/cli/serve.ts

@@ -21,6 +21,7 @@ program
     '-i, --sprite-input [<icon input directory>]',
     'directory path of icon source to build icons. The default <icon source> is `icons/`',
   )
+  .option('--sdf', 'Allows to use SDF sprite in charites')
   .option('--port [port]', 'Specify custom port')
   .option('--no-open', "Don't open the preview in the default browser")
   .action(async (source: string, serveOptions: serveOptions) => {
@@ -30,6 +31,7 @@ program
     options.port = serveOptions.port
     options.spriteInput = serveOptions.spriteInput
     options.open = serveOptions.open
+    options.sdf = serveOptions.sdf
     if (!fs.existsSync(defaultSettings.configFile)) {
       fs.writeFileSync(
         defaultSettings.configFile,

package/src/commands/serve.ts

@@ -17,6 +17,7 @@ export interface serveOptions {
   port?: string
   spriteInput?: string
   open?: boolean
+  sdf?: boolean
 }
 
 export async function serve(source: string, options: serveOptions) {
@@ -57,7 +58,7 @@ export async function serve(source: string, options: serveOptions) {
       ) {
         return
       }
-      await buildSprite(options.spriteInput, spriteOut, 'sprite')
+      await buildSprite(options.spriteInput, spriteOut, 'sprite', options.sdf)
     }
     await spriteRefresher()
   }

package/src/lib/build-sprite.ts

@@ -5,9 +5,10 @@ export async function buildSprite(
   svgPath: string,
   publicPath: string,
   iconSlug: string,
+  sdf = false,
 ): Promise<void> {
   const pxRatios = [1, 2]
   const outPath = path.join(publicPath, iconSlug)
-  await generateSprite(outPath, [svgPath], pxRatios)
+  await generateSprite(outPath, [svgPath], pxRatios, sdf)
   return
 }

package/src/lib/get-sprite-slug.ts

@@ -1,11 +1,15 @@
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
 
 export function getSpriteSlug(style: StyleSpecification): string | false {
-  if (!style.hasOwnProperty('sprite')) {
+  if (!style.hasOwnProperty('sprite') || !style.sprite) {
     return false
   }
 
-  const matchedUrl = style.sprite?.match(
+  const firstUrl = Array.isArray(style.sprite)
+    ? style.sprite[0].url
+    : style.sprite
+
+  const matchedUrl = firstUrl.match(
     /^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/,
   )
 

package/src/lib/validate-style.ts

@@ -1,4 +1,4 @@
-const maplibreStyleSpec = require('@maplibre/maplibre-gl-style-spec')
+import maplibreStyleSpec from '@maplibre/maplibre-gl-style-spec'
 const mapboxStyleSpec = require('@mapbox/mapbox-gl-style-spec')
 import { StyleSpecification } from '@maplibre/maplibre-gl-style-spec'
 
@@ -10,13 +10,21 @@ export function validateStyle(
   if ('mapbox' === provider) {
     result = mapboxStyleSpec.validate(style)
   } else {
-    result = maplibreStyleSpec.validate(style)
+    result = maplibreStyleSpec.validateStyleMin(style)
   }
 
   const errors = []
   for (let i = 0; i < result.length; i++) {
-    if (result[i].message) {
-      errors.push(result[i].message)
+    const msg = result[i].message
+    if (msg) {
+      const layerMatch = msg.match(/^layers\[([0-9]+)\]/)
+      if (layerMatch) {
+        const layerIndex = Number(layerMatch[1])
+        const layerId = style.layers[layerIndex].id
+        errors.push(`Layer "${layerId}": ${msg}`)
+      } else {
+        errors.push(msg)
+      }
     }
   }