Add a search control to default generated mapml-viewer

.github/workflows/ci-testing.yml

@@ -12,13 +12,19 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: latest
-    - name: Install XVFB
-      run: sudo apt-get install -y xvfb
-    - name: Install Dependencies
-      run: npm install
-    - name: Install Playwright
-      run: npx playwright install
+        node-version: 22
+        cache: npm
+    - run: npm ci --ignore-scripts
+    - name: Cache Playwright browsers
+      id: playwright-cache
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+    - run: npx playwright install --with-deps
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+    - run: npx playwright install-deps
+      if: steps.playwright-cache.outputs.cache-hit == 'true'
     - name: Run Tests with XVFB
       run: xvfb-run --auto-servernum -- npm test
       env:

package.json

@@ -14,7 +14,7 @@
   },
   "license": "W3C",
   "devDependencies": {
-    "@playwright/test": "^1.39.0",
-    "playwright": "^1.39.0"
+    "@playwright/test": "^1.60.0",
+    "playwright": "^1.60.0"
   }
 }

src/_locales/en/messages.json

@@ -76,6 +76,18 @@
   "btnZoomOut": {
     "message": "Zoom out"
   },
+  "btnSearch": {
+    "message": "Search"
+  },
+  "btnSearchClose": {
+    "message": "Close search"
+  },
+  "searchPlaceholder": {
+    "message": "Search…"
+  },
+  "searchResultWithNoName": {
+    "message": "Unnamed"
+  },
   "btnAttribution": {
     "message": "Map data attribution"
   },

src/_locales/fr/messages.json

@@ -77,6 +77,18 @@
   "btnZoomOut": {
     "message": "Dézoomer"
   },
+  "btnSearch": {
+    "message": "Rechercher"
+  },
+  "btnSearchClose": {
+    "message": "Fermer la recherche"
+  },
+  "searchPlaceholder": {
+    "message": "Rechercher\u2026"
+  },
+  "searchResultWithNoName": {
+    "message": "Sans nom"
+  },
   "btnAttribution": {
     "message": "Attribution des données cartographiques"
   },

src/_locales/sv/messages.json

@@ -76,6 +76,18 @@
   "btnZoomOut": {
     "message": "Zooma ut"
   },
+  "btnSearch": {
+    "message": "Sök"
+  },
+  "btnSearchClose": {
+    "message": "Stäng sökning"
+  },
+  "searchPlaceholder": {
+    "message": "Sök\u2026"
+  },
+  "searchResultWithNoName": {
+    "message": "Namnlös"
+  },
   "btnAttribution": {
     "message": "Tilldelning av kartdata"
   },

src/_locales/uk/messages.json

@@ -78,6 +78,18 @@
   "btnZoomOut": {
     "message": "Зменшити"
   },
+  "btnSearch": {
+    "message": "Пошук"
+  },
+  "btnSearchClose": {
+    "message": "Закрити пошук"
+  },
+  "searchPlaceholder": {
+    "message": "Пошук\u2026"
+  },
+  "searchResultWithNoName": {
+    "message": "Без назви"
+  },
   "btnAttribution": {
     "message": "Авторські права"
   },

src/background.js

@@ -130,6 +130,7 @@ function createMap() {
   let focus = !hash;
   map.setAttribute("projection", projection);
   map.setAttribute("controls", "");
+  map.setAttribute("controlslist", "search");
   map.setAttribute("lat", lat);
   map.setAttribute("lon", lon);
   map.setAttribute("zoom", zoom);