Allow loading different style based on language

cypress/e2e/i18n.cy.ts

@@ -1,5 +1,7 @@
 import { MaputnikDriver } from "./maputnik-driver";
 
+const selectorId = "maputnik-lang-select";
+
 describe("i18n", () => {
   let { beforeAndAfter, get, when, then } = new MaputnikDriver();
   beforeAndAfter();
@@ -8,13 +10,13 @@ describe("i18n", () => {
     it("English", () => {
       const url = "?lng=en";
       when.visit(url);
-      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("en");
+      then(get.elementByTestId(selectorId)).shouldHaveValue("en");
     });
 
     it("Japanese", () => {
       const url = "?lng=ja";
       when.visit(url);
-      then(get.elementByTestId("maputnik-lang-select")).shouldHaveValue("ja");
+      then(get.elementByTestId(selectorId)).shouldHaveValue("ja");
     });
   });
 
@@ -24,12 +26,42 @@ describe("i18n", () => {
     });
 
     it("the language switcher switches to Japanese", () => {
-      const selector = "maputnik-lang-select";
-      then(get.elementByTestId(selector)).shouldExist();
-      when.select(selector, "ja");
-      then(get.elementByTestId(selector)).shouldHaveValue("ja");
+      then(get.elementByTestId(selectorId)).shouldExist();
+      when.select(selectorId, "ja");
+      then(get.elementByTestId(selectorId)).shouldHaveValue("ja");
 
       then(get.elementByTestId("nav:settings")).shouldHaveText("スタイル設定");
     });
   });
+
+  describe("load different style depending on selected language", () => {
+    const testLang = (lang: string) => {
+      cy.intercept('GET', `**/${lang}.json*`).as(`${lang}JsonRequest`);
+
+      then(get.elementByTestId(selectorId)).shouldExist();
+      when.select(selectorId, lang);
+      then(get.elementByTestId(selectorId)).shouldHaveValue(lang);
+
+      cy.get('[data-wd-key="nav:open"]')
+        .should('exist')
+        .click();
+
+      cy.get('[aria-label="Protomaps Light"]')
+        .should('exist')
+        .click();
+
+      cy.wait(`@${lang}JsonRequest`).then((interception) => {
+        expect(interception).to.exist;
+        cy.log(`Network request to ${lang}.json was made`);
+      });
+    }
+
+    it("works with he", () => {
+      testLang("he");
+    });
+
+    it("works with de", () => {
+      testLang("de");
+    });
+  });
 });

src/components/ModalOpen.tsx

@@ -56,6 +56,10 @@ type ModalOpenState = {
   activeRequestUrl?: string | null
 };
 
+function transformStyleUrl(styleUrl: string, {language}: { language: string }) {
+  return styleUrl.replace("$lang", language);
+}
+
 class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpenState> {
   constructor(props: ModalOpenInternalProps) {
     super(props);
@@ -84,6 +88,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
   }
 
   onStyleSelect = (styleUrl: string) => {
+    styleUrl = transformStyleUrl(styleUrl, {language: this.props.i18n.language });
     this.clearError();
 
     let canceled: boolean = false;

src/config/styles.json

@@ -80,7 +80,7 @@
   {
     "id": "protomaps-light",
     "title": "Protomaps Light",
-    "url": "https://api.protomaps.com/styles/v2/light.json?key=d828297496b11844",
+    "url": "https://api.protomaps.com/styles/v4/light/$lang.json?key=d828297496b11844",
     "thumbnail": "https://github.com/user-attachments/assets/911f9765-4a7d-4736-9ec0-f2d4c90ae587"
   },
   {