Bug fix to support more overlay definitions

src/components/map-tile-provider/MapTileProvider.tsx

@@ -28,6 +28,7 @@ import {
   overlayCategories,
   overlayDefinitions,
 } from '../overlays/overlay-definitions';
+import { cloneDeep } from 'lodash';
 
 const id = getUri('overlays', undefined);
 
@@ -113,15 +114,16 @@ type Overlay = {
 };
 type Overlays = Record<string, Overlay>;
 
+const defaultOverlayContent = {
+  selected: false,
+  highlighted: {
+    none: [],
+  },
+  hidden: { none: [] },
+};
+
 const defaultOverlays: Overlays = {
   none: { selected: true, highlighted: { none: [] }, hidden: {} },
-  hiking: {
-    selected: false,
-    highlighted: {
-      none: [],
-    },
-    hidden: { none: [] },
-  },
 };
 
 // type OverlayDefinition = Record<string, FeatureTypes>;
@@ -380,6 +382,14 @@ const MapTilesProvider: Component<{}> = (props) => {
     });
   });
 
+  const getOverlaysAddingSelectedIfMissing = (key: string) => {
+    const overlays = getOverlays();
+    if (!Object.keys(overlays).includes(key)) {
+      overlays[key] = cloneDeep(defaultOverlayContent);
+    }
+    return overlays;
+  };
+
   const handleOverlayChange = (ev: any) => {
     const value = ev.target.value;
     console.log({
@@ -387,7 +397,7 @@ const MapTilesProvider: Component<{}> = (props) => {
       ev,
       value,
     });
-    const newOverlays = getOverlays();
+    const newOverlays = getOverlaysAddingSelectedIfMissing(value);
     Object.keys(newOverlays).forEach((key) => {
       newOverlays[key].selected = key === value;
     });

src/components/overlays/overlay-definitions.ts

@@ -3,7 +3,11 @@ import { Feature } from 'ol';
 
 export const overlayDefinitions = {
   amenity: {
-    bar: { hiking: { drinking: true } },
+    bar: {
+      hiking: { drinking: true },
+      cycling: { drinking: true },
+      vanlife: { drinking: true },
+    },
     fast_food: { hiking: { eating: true } },
     food_court: { hiking: { eating: true } },
     pub: { hiking: { eating: true } },