Clear POI overlay markers when all categories are unchecked

map/src/map/layers/PoiLayer.js

@@ -537,35 +537,33 @@ export default function PoiLayer() {
                 !prevCategories ||
                 JSON.stringify(prevCategories.map((c) => c.category).sort()) !==
                     JSON.stringify(ctx.showPoiCategories.map((c) => c.category).sort());
-            if ((!isEmpty(ctx.showPoiCategories) && zoom !== prevZoom) || move || isTypeChange) {
+            if (isEmpty(ctx.showPoiCategories)) {
+                // if categories are cleared, then clear the list and related states
+                setPrevCategories(null);
+                if (poiList) {
+                    clearPoiList();
+                }
+            } else if (zoom !== prevZoom || move || isTypeChange) {
                 if (prevController) {
                     prevController.abort();
                 }
                 setPrevController(controller);
                 setPrevZoom(zoom);
-                if (ctx.showPoiCategories.length > 0) {
-                    if (categoriesChanged) {
-                        setPrevCategories(null);
-                    }
-                    reqIdRef.current += 1;
-                    const runGetPoi = categoriesChanged || isTypeChange ? getPoiTask : debouncedGetPoi;
-                    runGetPoi({
-                        controller,
-                        ignore,
-                        poiList: categoriesChanged ? null : poiList,
-                        showPoiCategories: ctx.showPoiCategories,
-                        poiIconCache: ctx.poiIconCache,
-                        zoom,
-                        reqId: reqIdRef.current,
-                        visibleBboxInfo: getVisibleBboxInfo(ctx, map),
-                    });
-                }
-            } else if (isEmpty(ctx.showPoiCategories)) {
-                // if categories are cleared, then clear the list and related states
-                setPrevCategories(null);
-                if (poiList) {
-                    clearPoiList();
+                if (categoriesChanged) {
+                    setPrevCategories(null);
                 }
+                reqIdRef.current += 1;
+                const runGetPoi = categoriesChanged || isTypeChange ? getPoiTask : debouncedGetPoi;
+                runGetPoi({
+                    controller,
+                    ignore,
+                    poiList: categoriesChanged ? null : poiList,
+                    showPoiCategories: ctx.showPoiCategories,
+                    poiIconCache: ctx.poiIconCache,
+                    zoom,
+                    reqId: reqIdRef.current,
+                    visibleBboxInfo: getVisibleBboxInfo(ctx, map),
+                });
             } else if (poiList?.listFeatures?.features?.length > 0) {
                 // same categories, no zoom/move change: re-render the existing pois without a new request
                 const newLayer = await createPoiLayer({

tests/selenium/src/tests/search/100-poi-overlay-disable.mjs

@@ -0,0 +1,43 @@
+import actionOpenMap from '../../actions/map/actionOpenMap.mjs';
+import actionLogIn from '../../actions/login/actionLogIn.mjs';
+import actionCheckPoi from '../../actions/map/actionCheckPoi.mjs';
+import actionFinish from '../../actions/actionFinish.mjs';
+import { clickBy, waitBy } from '../../lib.mjs';
+import { By } from 'selenium-webdriver';
+
+export default async function test() {
+    await actionOpenMap();
+    await actionLogIn();
+
+    const category = 'Cafe and restaurant';
+    const iconWpt = 'amenity_restaurant';
+    const poiName = 'Public Cafe';
+
+    await actionCheckPoi({ iconWpt, name: poiName, hidden: true });
+
+    // open configure map
+    await clickBy(By.id('se-show-menu-configuremap'));
+    await waitBy(By.id('se-configure-map-menu-name'));
+
+    // enable POI overlay
+    await togglePoiCategory(category);
+    await actionCheckPoi({ iconWpt, name: poiName });
+
+    // disable POI overlay: markers must disappear without page reload
+    await togglePoiCategory(category);
+    await actionCheckPoi({ iconWpt, name: poiName, hidden: true });
+
+    await actionFinish();
+}
+
+// open POI categories from the opened configure map, switch the category over and apply
+async function togglePoiCategory(category) {
+    await waitBy(By.id('se-configure-map-menu-poi-categories'));
+    await clickBy(By.id('se-configure-map-menu-poi-categories'));
+
+    await waitBy(By.id(`se-poi-category-${category}`));
+    await clickBy(By.id(`se-poi-category-${category}`));
+    await clickBy(By.id('se-select-categories'));
+
+    await waitBy(By.id('se-configure-map-menu-name'));
+}