feat: Plus und Minus Zoom Icons

.env.development

@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.372
+NEXT_PUBLIC_APP_VERSION=1.1.373

.env.production

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.372
+NEXT_PUBLIC_APP_VERSION=1.1.373

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.372",
+  "version": "1.1.373",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.372",
+      "version": "1.1.373",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.372",
+  "version": "1.1.373",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",

playwright/tests/mapcomponent.spec.js

@@ -268,3 +268,35 @@ test("mouse wheel zoom updates mapZoom", async ({ page }) => {
   const afterOut = await getZoomFromLocalStorage(page);
   expect(afterOut).toBeLessThan(afterIn);
 });
+
+test("zoom control buttons update mapZoom", async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("currentMapId", "12");
+    localStorage.setItem("currentUserId", "484");
+    localStorage.setItem("mapCenter", JSON.stringify([53.23938294961826, 8.21434020996094]));
+    localStorage.setItem("mapZoom", "10");
+    localStorage.setItem("showAppInfoCard", "false");
+    localStorage.setItem("showCoordinateInput", "false");
+    localStorage.setItem("showLayersPanel", "false");
+    localStorage.setItem("showAreaDropdown", "false");
+  });
+
+  await page.goto("http://localhost:3000/?m=12&u=484");
+  // Wait for Leaflet map and zoom controls
+  await page.locator("#map.leaflet-container").waitFor({ state: "visible", timeout: 20_000 });
+  const zoomInBtn = page.locator(".leaflet-control-zoom-in");
+  const zoomOutBtn = page.locator(".leaflet-control-zoom-out");
+  await expect(zoomInBtn).toBeVisible();
+  await expect(zoomOutBtn).toBeVisible();
+
+  const z0 = await getZoomFromLocalStorage(page);
+  await zoomInBtn.click();
+  await waitForZoomChange(page, z0, "gt");
+  const z1 = await getZoomFromLocalStorage(page);
+  expect(z1).toBeGreaterThan(z0);
+
+  await zoomOutBtn.click();
+  await waitForZoomChange(page, z1, "lt");
+  const z2 = await getZoomFromLocalStorage(page);
+  expect(z2).toBeLessThan(z1);
+});

reports/junit/playwright.xml

@@ -1,6 +1,6 @@
-<testsuites id="" name="" tests="2" failures="1" skipped="0" errors="0" time="20.996912000000002">
+<testsuites id="" name="" tests="3" failures="2" skipped="0" errors="0" time="22.572574">
-<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T09:56:04.986Z" hostname="chromium" tests="2" failures="1" skipped="0" time="25.036" errors="0">
+<testsuite name="mapcomponent.spec.js" timestamp="2025-09-16T10:11:10.535Z" hostname="chromium" tests="3" failures="2" skipped="0" time="41.545" errors="0">
-<testcase name="MapComponent" classname="mapcomponent.spec.js" time="18.789">
+<testcase name="MapComponent" classname="mapcomponent.spec.js" time="20.181">
 <failure message="mapcomponent.spec.js:162:5 MapComponent" type="FAILURE">
 <![CDATA[  [chromium] › mapcomponent.spec.js:162:5 › MapComponent ───────────────────────────────────────────
 
@@ -56,7 +56,54 @@
 ]]>
 </system-out>
 </testcase>
-<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="6.247">
+<testcase name="mouse wheel zoom updates mapZoom" classname="mapcomponent.spec.js" time="14.824">
+<failure message="mapcomponent.spec.js:239:5 mouse wheel zoom updates mapZoom" type="FAILURE">
+<![CDATA[  [chromium] › mapcomponent.spec.js:239:5 › mouse wheel zoom updates mapZoom ───────────────────────
+
+    TimeoutError: page.waitForFunction: Timeout 10000ms exceeded.
+
+      82 |  */
+      83 | async function waitForZoomChange(page, previousZoom, compareFn) {
+    > 84 |   await page.waitForFunction(
+         |              ^
+      85 |     (prev, cmp) => {
+      86 |       const v = localStorage.getItem("mapZoom");
+      87 |       if (!v) return false;
+        at waitForZoomChange (C:\Users\isa.LTW\Desktop\15.09.2025\NodeMap\15.09.2025 NodeMap V1.1.350\playwright\tests\mapcomponent.spec.js:84:14)
+        at C:\Users\isa.LTW\Desktop\15.09.2025\NodeMap\15.09.2025 NodeMap V1.1.350\playwright\tests\mapcomponent.spec.js:261:9
+
+    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
+    ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\test-failed-1.png
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+
+    attachment #3: video (video/webm) ──────────────────────────────────────────────────────────────
+    ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\video.webm
+    ────────────────────────────────────────────────────────────────────────────────────────────────
+
+    Error Context: ..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\error-context.md
+]]>
+</failure>
+<system-out>
+<![CDATA[[localStorage snapshot] {
+  mapZoom: [32m'10'[39m,
+  mapCenter: [32m'[53.23938294961826,8.21434020996094]'[39m,
+  showAppInfoCard: [32m'false'[39m,
+  showCoordinateInput: [32m'false'[39m,
+  showLayersPanel: [32m'false'[39m,
+  showAreaDropdown: [32m'false'[39m,
+  currentMapId: [32m'12'[39m,
+  currentUserId: [32m'484'[39m
+}
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\test-failed-1.png]]
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\video.webm]]
+
+[[ATTACHMENT|..\..\test-results\mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium\error-context.md]]
+]]>
+</system-out>
+</testcase>
+<testcase name="zoom control buttons update mapZoom" classname="mapcomponent.spec.js" time="6.54">
 </testcase>
 </testsuite>
 </testsuites>

test-results/.last-run.json

@@ -1,6 +1,7 @@
 {
   "status": "failed",
   "failedTests": [
-    "6232baea8c2400610a3b-ecc9849a86ce59ad8482"
+    "6232baea8c2400610a3b-ecc9849a86ce59ad8482",
+    "6232baea8c2400610a3b-3d4c054f3ad171ada4e9"
   ]
 }

test-results/mapcomponent-MapComponent-chromium/error-context.md

@@ -35,25 +35,32 @@
           - button "Marker" [ref=e31] [cursor=pointer]
           - button "Marker" [ref=e32] [cursor=pointer]
           - button "Marker" [ref=e33] [cursor=pointer]
+      - generic:
+        - generic:
           - generic [ref=e34]:
-        - link "Leaflet" [ref=e35] [cursor=pointer]:
+            - button "Zoom in" [ref=e35] [cursor=pointer]:
+              - generic [ref=e36] [cursor=pointer]: +
+            - button "Zoom out" [ref=e37] [cursor=pointer]:
+              - generic [ref=e38] [cursor=pointer]: −
+          - generic [ref=e39]:
+            - link "Leaflet" [ref=e40] [cursor=pointer]:
               - /url: https://leafletjs.com
-          - img [ref=e36] [cursor=pointer]
+              - img [ref=e41] [cursor=pointer]
               - text: Leaflet
-        - generic [ref=e40]: "|"
+            - generic [ref=e45]: "|"
             - text: © OpenStreetMap contributors
-    - generic [ref=e41]:
+    - generic [ref=e46]:
-      - button "Marker" [ref=e42] [cursor=pointer]:
+      - button "Marker" [ref=e47] [cursor=pointer]:
-        - img [ref=e43] [cursor=pointer]
+        - img [ref=e48] [cursor=pointer]
-      - button "Koordinatensuche einblenden" [ref=e46] [cursor=pointer]:
+      - button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
-        - img [ref=e47] [cursor=pointer]
+        - img [ref=e52] [cursor=pointer]
-      - button "Bearbeitungsmodus aktivieren" [ref=e49] [cursor=pointer]:
+      - button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
-        - img [ref=e50] [cursor=pointer]
+        - img [ref=e55] [cursor=pointer]
-      - button "Karte auf Standardansicht" [ref=e52] [cursor=pointer]:
+      - button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
-        - img [ref=e53] [cursor=pointer]
+        - img [ref=e58] [cursor=pointer]
-      - button "Layer-Panel einblenden" [active] [ref=e55] [cursor=pointer]:
+      - button "Layer-Panel einblenden" [active] [ref=e60] [cursor=pointer]:
-        - img [ref=e56] [cursor=pointer]
+        - img [ref=e61] [cursor=pointer]
-      - button "Info einblenden" [ref=e58] [cursor=pointer]:
+      - button "Info einblenden" [ref=e63] [cursor=pointer]:
-        - img [ref=e59] [cursor=pointer]
+        - img [ref=e64] [cursor=pointer]
-  - alert [ref=e61]
+  - alert [ref=e66]
 ```

test-results/mapcomponent-mouse-wheel-zoom-updates-mapZoom-chromium/error-context.md

@@ -0,0 +1,66 @@
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - generic [ref=e3]:
+    - generic [ref=e4]:
+      - generic:
+        - generic:
+          - button "Marker" [ref=e5] [cursor=pointer]
+          - button "Marker" [ref=e6] [cursor=pointer]
+          - button "Marker" [ref=e7] [cursor=pointer]
+          - button "Marker" [ref=e8] [cursor=pointer]
+          - button "Marker" [ref=e9] [cursor=pointer]
+          - button "Marker" [ref=e10] [cursor=pointer]
+          - button "Marker" [ref=e11] [cursor=pointer]
+          - button "Marker" [ref=e12] [cursor=pointer]
+          - button "Marker" [ref=e13] [cursor=pointer]
+          - button "Marker" [ref=e14] [cursor=pointer]
+          - button "Marker" [ref=e15] [cursor=pointer]
+          - button "Marker" [ref=e16] [cursor=pointer]
+          - button "Marker" [ref=e17] [cursor=pointer]
+          - button "Marker" [ref=e18] [cursor=pointer]
+          - button "Marker" [ref=e19] [cursor=pointer]
+          - button "Marker" [ref=e20] [cursor=pointer]
+          - button "Marker" [ref=e21] [cursor=pointer]
+          - button "Marker" [ref=e22] [cursor=pointer]
+          - button "Marker" [ref=e23] [cursor=pointer]
+          - button "Marker" [ref=e24] [cursor=pointer]
+          - button "Marker" [ref=e25] [cursor=pointer]
+          - button "Marker" [ref=e26] [cursor=pointer]
+          - button "Marker" [ref=e27] [cursor=pointer]
+          - button "Marker" [ref=e28] [cursor=pointer]
+          - button "Marker" [ref=e29] [cursor=pointer]
+          - button "Marker" [ref=e30] [cursor=pointer]
+          - button "Marker" [ref=e31] [cursor=pointer]
+          - button "Marker" [ref=e32] [cursor=pointer]
+          - button "Marker" [ref=e33] [cursor=pointer]
+      - generic:
+        - generic:
+          - generic [ref=e34]:
+            - button "Zoom in" [ref=e35] [cursor=pointer]:
+              - generic [ref=e36] [cursor=pointer]: +
+            - button "Zoom out" [ref=e37] [cursor=pointer]:
+              - generic [ref=e38] [cursor=pointer]: −
+          - generic [ref=e39]:
+            - link "Leaflet" [ref=e40] [cursor=pointer]:
+              - /url: https://leafletjs.com
+              - img [ref=e41] [cursor=pointer]
+              - text: Leaflet
+            - generic [ref=e45]: "|"
+            - text: © OpenStreetMap contributors
+    - generic [ref=e46]:
+      - button "Marker" [ref=e47] [cursor=pointer]:
+        - img [ref=e48] [cursor=pointer]
+      - button "Koordinatensuche einblenden" [ref=e51] [cursor=pointer]:
+        - img [ref=e52] [cursor=pointer]
+      - button "Bearbeitungsmodus aktivieren" [ref=e54] [cursor=pointer]:
+        - img [ref=e55] [cursor=pointer]
+      - button "Karte auf Standardansicht" [ref=e57] [cursor=pointer]:
+        - img [ref=e58] [cursor=pointer]
+      - button "Layer-Panel einblenden" [ref=e60] [cursor=pointer]:
+        - img [ref=e61] [cursor=pointer]
+      - button "Info einblenden" [ref=e63] [cursor=pointer]:
+        - img [ref=e64] [cursor=pointer]
+  - alert [ref=e66]
+```

utils/initializeMap.js

@@ -125,6 +125,7 @@ export const initializeMap = (
       zoom: mapZoom,
       minZoom: minZoom,
       maxZoom: maxZoom,
+      // Disable default position; we'll add our own control at bottom-right
       zoomControl: false,
       dragging: true,
       contextmenu: true,
@@ -142,6 +143,13 @@ export const initializeMap = (
 
   initMap.dragging.enable();
 
+  // Add visible +/- zoom control bottom-right (playwright-friendly)
+  try {
+    L.control
+      .zoom({ position: "bottomright" })
+      .addTo(initMap);
+  } catch (_) {}
+
   L.tileLayer(tileLayerUrl, {
     attribution: "© OpenStreetMap contributors",
     tileSize: 256,