Add lang and script parameters to TypeScript style generation (#275)

Style 4.0.0-alpha.0 * Add lang and script parameters to TypeScript style generation * Add comments, support Hindi * Use multiline names on all labels * Add generate languages script * Add special case for Japanese * Use Mixed-Japanese * Use pmap:pgf:name* when available * Generate all themes in all supported languages * Add lang dropdown to app * Remove generate_layers.ts * Update package.json
protomaps · Aug 25, 2024 · b6b976d · b6b976d
1 parent 57cc4b9
commit b6b976d
Show file tree

Hide file tree

Showing 14 changed files with 706 additions and 59 deletions.
diff --git a/.github/workflows/app.yml b/.github/workflows/app.yml
@@ -17,12 +17,12 @@ jobs:
           github_token: ${{ secrets.GITHUB_TOKEN }}
       - uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version-file: 'app/.nvmrc'
       - run: echo "VITE_GIT_SHA=$(git rev-parse --short HEAD)" >> app/.env
       - name: Check styles
-        run: npm install && npx tsc --noEmit && npm run check
+        run: npm ci && npm run tsc && npm run check
         working-directory: styles
-      - run: npm install && npx tsc --noEmit && npm run check && npx vite build
+      - run: npm ci && npm run tsc && npm run check && npm run build
         working-directory: app
       - run: python .github/check_examples.py
       - uses: peaceiris/actions-gh-pages@v3

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+Styles v4.0.0-alpha.0
+------
+- Add lang and script parameters to TypeScript style generation [#275]
+
 Tiles v4.0.0-alpha.3
 ------
 - Replace Natural Earth places at low zooms with OSM [#289]

diff --git a/README.md b/README.md
@@ -34,7 +34,8 @@ java -jar target/*-with-deps.jar --download --force --area=monaco
 
 ```shell
 cd app
-npm install
+nvm use
+npm ci
 npm run dev
 ```
 

diff --git a/app/.nvmrc b/app/.nvmrc
@@ -0,0 +1 @@
+../styles/.nvmrc
diff --git a/app/package.json b/app/package.json
@@ -5,10 +5,12 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
+    "tsc": "tsc --noEmit",
     "preview": "vite preview",
     "test": "vitest",
-    "check": "biome check src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space"
+    "check": "biome check src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space",
+    "format": "biome format --write src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space"
   },
   "dependencies": {
     "maplibre-gl": "^4.1.3",

diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
@@ -13,6 +13,7 @@ import {
 import { renderToString } from "react-dom/server";
 import { useDropzone } from "react-dropzone";
 import layers from "../../styles/src/index.ts";
+import { language_script_pairs } from "../../styles/src/language.ts";
 
 import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 
@@ -68,6 +69,7 @@ export const isValidPMTiles = (tiles?: string): boolean => {
 
 function getMaplibreStyle(
   theme: string,
+  lang: string,
   localSprites: boolean,
   tiles?: string,
   npmLayers?: LayerSpecification[],
@@ -121,14 +123,19 @@ function getMaplibreStyle(
   if (npmLayers && npmLayers.length > 0) {
     style.layers = style.layers.concat(npmLayers);
   } else {
-    style.layers = style.layers.concat(layers("protomaps", theme));
+    style.layers = style.layers.concat(layers("protomaps", theme, lang));
   }
   return style;
 }
 
-function StyleJsonPane(props: { theme: string }) {
+function StyleJsonPane(props: { theme: string; lang: string }) {
   const stringified = JSON.stringify(
-    getMaplibreStyle(props.theme, false, "https://example.com/tiles.json"),
+    getMaplibreStyle(
+      props.theme,
+      props.lang,
+      false,
+      "https://example.com/tiles.json",
+    ),
     null,
     4,
   );
@@ -150,6 +157,7 @@ function StyleJsonPane(props: { theme: string }) {
 
 function MapLibreView(props: {
   theme: string;
+  lang: string;
   localSprites: boolean;
   tiles?: string;
   npmLayers: LayerSpecification[];
@@ -173,7 +181,7 @@ function MapLibreView(props: {
     const map = new maplibregl.Map({
       hash: "map",
       container: "map",
-      style: getMaplibreStyle("", false),
+      style: getMaplibreStyle("", "en", false),
     });
 
     map.addControl(new maplibregl.NavigationControl());
@@ -196,7 +204,7 @@ function MapLibreView(props: {
       maxWidth: "none",
     });
 
-    map.on("mousedown", (e) => {
+    map.on("contextmenu", (e) => {
       const features = map.queryRenderedFeatures(e.point);
       if (features.length) {
         const content = renderToString(
@@ -251,6 +259,7 @@ function MapLibreView(props: {
         mapRef.current.setStyle(
           getMaplibreStyle(
             props.theme,
+            props.lang,
             props.localSprites,
             props.tiles,
             props.npmLayers,
@@ -264,6 +273,7 @@ function MapLibreView(props: {
   }, [
     props.tiles,
     props.theme,
+    props.lang,
     props.localSprites,
     props.npmLayers,
     props.droppedArchive,
@@ -276,6 +286,7 @@ function MapLibreView(props: {
 export default function MapViewComponent() {
   const hash = parseHash(location.hash);
   const [theme, setTheme] = useState<string>(hash.theme || "light");
+  const [lang, setLang] = useState<string>(hash.lang || "en");
   const [tiles, setTiles] = useState<string | undefined>(hash.tiles);
   const [localSprites, setLocalSprites] = useState<boolean>(
     hash.local_sprites === "true",
@@ -291,6 +302,7 @@ export default function MapViewComponent() {
   useEffect(() => {
     const record = {
       theme: theme,
+      lang: lang,
       tiles: tiles,
       local_sprites: localSprites ? "true" : undefined,
       npm_version: publishedStyleVersion,
@@ -368,6 +380,8 @@ export default function MapViewComponent() {
     })();
   }, [publishedStyleVersion, theme]);
 
+  language_script_pairs.sort((a, b) => a.full_name.localeCompare(b.full_name));
+
   return (
     <div className="map-container">
       <nav>
@@ -388,6 +402,13 @@ export default function MapViewComponent() {
           <option value="grayscale">data viz (grayscale)</option>
           <option value="black">data viz (black)</option>
         </select>
+        <select onChange={(e) => setLang(e.target.value)} value={lang}>
+          {language_script_pairs.map((pair) => (
+            <option key={pair.lang} value={pair.lang}>
+              {pair.full_name}
+            </option>
+          ))}
+        </select>
         <input
           id="localSprites"
           type="checkbox"
@@ -431,10 +452,11 @@ export default function MapViewComponent() {
           tiles={tiles}
           localSprites={localSprites}
           theme={theme}
+          lang={lang}
           npmLayers={npmLayers}
           droppedArchive={droppedArchive}
         />
-        {showStyleJson && <StyleJsonPane theme={theme} />}
+        {showStyleJson && <StyleJsonPane theme={theme} lang={lang} />}
       </div>
     </div>
   );

diff --git a/app/src/VisualTestsComponent.tsx b/app/src/VisualTestsComponent.tsx
@@ -240,7 +240,7 @@ export default function VisualTestsComponent() {
       const leftLayers = await layersForVersion(leftLayersStr);
       const rightLayers = rightLayersStr
         ? await layersForVersion(rightLayersStr)
-        : layers("protomaps", "light");
+        : layers("protomaps", "light", "en", "Latin");
 
       setDisplayInfo([
         leftTiles,

diff --git a/styles/README.md b/styles/README.md
@@ -7,12 +7,28 @@ nvm use
 npm ci
 ```
 
-## Generate JSON layers
+## Generate JSON styles in all themes and languages
 
-This only generates the `layers` key of a style; you'll assemble `source`, `glyphs`, `sprite` yourself.
+To generate style.json files in all themes and supported languages, run:
 
-`generate-layers SOURCE_NAME THEME`
+```
+npm run generate-styles https://example.com/your-tilejson-url.json
+```
+
+Note that you have to replace the tilejson url with your own.
+
+This will create files in the `dist/styles/` folder like this:
 
 ```
-npm run generate-layers protomaps light
+dist/
+  styles/
+    black/
+      ar.json
+      bg.json
+      ...
+    contrast/
+      ar.json
+      bg.json
+      ...
+    ...
 ```
diff --git a/styles/package.json b/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protomaps-themes-base",
-  "version": "3.1.0",
+  "version": "4.0.0-alpha.0",
   "description": "Protomaps basemap themes for MapLibre GL JS",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -24,17 +24,13 @@
     "src"
   ],
   "scripts": {
-    "generate-layers": "tsx src/generate_layers.ts",
-    "dist-light": "mkdir -p dist/layers && npm run --silent generate-layers protomaps light > dist/layers/light.json",
-    "dist-dark": "mkdir -p dist/layers && npm run --silent generate-layers protomaps dark > dist/layers/dark.json",
-    "dist-white": "mkdir -p dist/layers && npm run --silent generate-layers protomaps white > dist/layers/white.json",
-    "dist-grayscale": "mkdir -p dist/layers && npm run --silent generate-layers protomaps grayscale > dist/layers/grayscale.json",
-    "dist-black": "mkdir -p dist/layers && npm run --silent generate-layers protomaps black > dist/layers/black.json",
-    "dist-all": "npm run dist-light && npm run dist-dark && npm run dist-white && npm run dist-grayscale && npm run dist-black",
-    "build": "tsup && npm run dist-all",
+    "generate-styles": "tsx src/generate_styles.ts",
+    "build": "tsup && npm run generate-styles https://example.com/tiles.json",
     "test": "tsx test/index.test.ts",
-    "tsc": "tsc --noEmit --watch",
-    "check": "biome check src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space"
+    "tsc-watch": "tsc --noEmit --watch",
+    "tsc": "tsc --noEmit",
+    "check": "biome check src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space",
+    "format": "biome format --write src test --javascript-formatter-indent-style=space --json-formatter-indent-style=space"
   },
   "repository": {
     "type": "git",
-Original file line number
+Diff line change
@@ Expand Up @@
     ```shell
     cd app
-    npm install
+    nvm use
+    npm ci
     npm run dev
     ```
@@ Expand Down @@