@panoramax/web-viewer 3.0.2-develop-a8ea8e60-develop-f1bb641f → 3.1.0-develop-537ffe27

package/docs/05_Compatibility.md

@@ -83,3 +83,17 @@ A supplementary layer _grid_ can be made available for low-zoom overview:
 
 - Available on zoom levels < 6
 - Available properties: `id` (grid cell ID), `nb_pictures` (amount of pictures), `coef` (value from 0 to 1, relative quantity of available pictures)
+
+### Labels translation
+
+If your vector tiles support multiple languages, you can set in your `style.json` the list of supported languages :
+
+```json
+{
+    "metadata": {
+        "panoramax:locales": ["fr", "en", "latin"]
+    }
+}
+```
+
+The viewer will try to find the best matching `name:LANG` property according to user browser settings.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.0.2-develop-a8ea8e60-develop-f1bb641f",
+  "version": "3.1.0-develop-537ffe27",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/utils/I18n.js

@@ -10,7 +10,13 @@ const TRANSLATIONS = {
 	"de": T_de, "en": T_en, "es": T_es, "fr": T_fr, "hu": T_hu, "zh_Hant": T_zh_Hant,
 };
 
-const autoDetectLocale = () => {
+/**
+ * Find best matching language regarding of list of supported languages and browser accepted languages
+ * @param {str[]} supportedTranslations List of supported languages
+ * @param {str} fallback The fallback language
+ * @returns The best matching language
+ */
+export function autoDetectLocale(supportedTranslations, fallback) { // eslint-ignore import/no-unused-modules
 	for (const navigatorLang of window.navigator.languages) {
 		let language = navigatorLang;
 		// Convert browser code to weblate code
@@ -30,13 +36,14 @@ const autoDetectLocale = () => {
 			}
 			break;
 		}
-		const pair = Object.entries(TRANSLATIONS).find((pair) => pair[0] === language);
+		const pair = supportedTranslations.find((pair) => pair === language);
 		if (pair) {
-			return pair[0];
+			return pair;
 		}
 	}
-	return FALLBACK_LOCALE;
-};
+	return fallback;
+}
+
 /**
  * Get text labels translations in given language
  *
@@ -50,7 +57,7 @@ export function getTranslations(lang = "") {
 	
 	// No specific lang set -> use browser lang
 	if(!lang) {
-		lang = autoDetectLocale();
+		lang = autoDetectLocale(Object.keys(TRANSLATIONS), FALLBACK_LOCALE);
 	}
 
 	// Lang exists -> send it

package/src/utils/Map.js

@@ -2,6 +2,7 @@
 import maplibregl from "!maplibre-gl";
 import LoaderImg from "../img/marker.svg";
 import { COLORS } from "./Utils";
+import { autoDetectLocale } from "./I18n";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "gvs-aerial";
@@ -152,7 +153,47 @@ export function combineStyles(parent, options) {
 			}
 		}
 	});
-	
+
+	// TODO : remove override once available in default Panoramax style
+	if(!style.metadata["panoramax:locales"]) {
+		style.metadata["panoramax:locales"] = ["fr", "en", "de", "es", "ru", "pt", "zh", "hi", "latin"];
+	}
+
+	// Override labels to use appropriate language
+	if(style.metadata["panoramax:locales"]) {
+		const prefLang = autoDetectLocale(style.metadata["panoramax:locales"], "latin");
+		style.layers.forEach(l => {
+			if(isLabelLayer(l) && l.layout["text-field"].includes("name:latin")) {
+				l.layout["text-field"] = [
+					"coalesce",
+					["get", `name:${prefLang}`],
+					["get", "name:latin"],
+					["get", "name"]
+				];
+			}
+		});
+	}
+
+	// Fix for capital cities
+	const citiesLayer = style.layers.find(l => l.id == "place_label_city");
+	let capitalLayer = style.layers.find(l => l.id == "place_label_capital");
+	if(citiesLayer && !capitalLayer) {
+		// Create capital layer from original city style
+		capitalLayer = JSON.parse(JSON.stringify(citiesLayer));
+		capitalLayer.id = "place_label_capital";
+		capitalLayer.filter.push(["<=", "capital", 2]);
+
+		// Edit original city to make it less import
+		citiesLayer.filter.push([">", "capital", 2]);
+		citiesLayer.paint = {
+			"text-color": "hsl(0,0%,15%)",
+			"text-halo-blur": 0.5,
+			"text-halo-color": "hsl(0,0%,100%)",
+			"text-halo-width": 0.8,
+		};
+		style.layers.push(capitalLayer);
+	}
+
 	return style;
 }
 

package/tests/components/Map.test.js

@@ -26,6 +26,7 @@ jest.mock("maplibre-gl", () => ({
 			return {
 				layers: [],
 				sources: {},
+				metadata: {},
 			};
 		}
 		resize() {;}
@@ -52,7 +53,7 @@ const createParent = () => ({
 		getDataBbox: jest.fn(),
 		getPicturesTilesUrl: jest.fn(),
 		_getMapRequestTransform: jest.fn(),
-		getMapStyle: () => ({ sources: {}, layers: [] }),
+		getMapStyle: () => ({ sources: {}, layers: [], metadata: {} }),
 	},
 	_t: {
 		maplibre: {},

package/tests/utils/I18n.test.js

@@ -1,4 +1,87 @@
-import { getTranslations } from "../../src/utils/I18n";
+import { autoDetectLocale, getTranslations } from "../../src/utils/I18n";
+
+describe("autoDetectLocale", () => {
+    // Mock the window.navigator.languages
+    const originalNavigatorLanguages = window.navigator.languages;
+
+    afterEach(() => {
+        // Reset window.navigator.languages after each test
+        Object.defineProperty(window.navigator, "languages", {
+            value: originalNavigatorLanguages,
+            configurable: true
+        });
+    });
+
+    it("returns matched language from supportedTranslations", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-FR", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["en", "fr", "es"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("fr");
+    });
+
+    it("returns fallback when no match is found", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["de-DE", "it-IT"],
+            configurable: true
+        });
+        const supportedTranslations = ["en", "fr", "es"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("en");
+    });
+
+    it("returns zh_Hant for Chinese Traditional locales", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["zh-TW"],
+            configurable: true
+        });
+        const supportedTranslations = ["zh_Hant", "zh_Hans", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("zh_Hant");
+    });
+
+    it("returns zh_Hans for Chinese Simplified locales", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["zh-CN"],
+            configurable: true
+        });
+        const supportedTranslations = ["zh_Hant", "zh_Hans", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("zh_Hans");
+    });
+
+    it("returns first matched language even when navigator language has region", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-CA", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["fr", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("fr");
+    });
+
+    it("returns fallback when supportedTranslations is empty", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-FR"],
+            configurable: true
+        });
+        const supportedTranslations = [];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("en");
+    });
+
+    it("handles language codes with more than two characters", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["pt-BR", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["pt", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("pt");
+    });
+});
 
 describe("getTranslations", () => {
 	it("works with default lang", () => {