Adding minZoom extension property for Wpts

src/components/gpx/styles.ts

@@ -13,6 +13,7 @@ import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
 import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
 import { Feature } from 'ol';
 import memoize from 'memoizee';
+import { getState } from '../map';
 
 interface StyleParameters {
   type: string;
@@ -113,19 +114,28 @@ const styles = {
       }),
     },
     wpt: {
-      image: (feature: Feature) => {
+      image: (feature: Feature, zoom: number) => {
+        const minZoom = feature.get('extensions')?.['dyo:minZoom'];
+        if (minZoom && zoom < minZoom) {
+          return null;
+        }
         const customIcon = icons[feature.get('sym') as keyof typeof icons];
         const icon = customIcon ?? wptIconObj;
         return new Icon(icon);
       },
-      text: (feature: Feature) =>
-        new Text({
+      text: (feature: Feature, zoom: number) => {
+        const minZoom = feature.get('extensions')?.['dyo:minZoom'];
+        if (minZoom && zoom < minZoom) {
+          return null;
+        }
+        return new Text({
           font: '16px Calibri,sans-serif',
           text: feature.get('name'),
           fill: textFill,
           stroke: textStroke,
           offsetY: -40,
-        }),
+        });
+      },
     },
   },
   selected: {
@@ -154,10 +164,24 @@ const styles = {
   },
 };
 
+const styleRequiresFeatureAndZoom = memoize(
+  (type: keyof typeof styles.default) => {
+    const defaults = styles.default[type];
+    const selected = styles.selected[type];
+    const all = { ...selected, ...defaults };
+    for (const key of Object.keys(all)) {
+      if (all[key] instanceof Function && all[key].length > 1) {
+        return true;
+      }
+    }
+    return false;
+  }
+);
+
 const styleRequiresFeature = memoize((type: keyof typeof styles.default) => {
   const defaults = styles.default[type];
   const selected = styles.selected[type];
-  const all = { ...defaults, ...selected };
+  const all = { ...selected, ...defaults };
   for (const key of Object.keys(all)) {
     if (all[key] instanceof Function) {
       return true;
@@ -170,7 +194,8 @@ const getStyle = memoize(
   (
     type: keyof typeof styles.default,
     isSelected: boolean = false,
-    params: any
+    feature: any,
+    zoom: any
   ) => {
     const defaults = styles.default[type];
     const selected = styles.selected[type];
@@ -186,22 +211,26 @@ const getStyle = memoize(
     // });
     for (const key of Object.keys(all)) {
       if (all[key] instanceof Function) {
-        all[key] = all[key](params);
+        all[key] = all[key](feature, zoom);
       }
     }
     return new Style(all);
   },
-  { length: 3, max: 1024 }
+  { length: 4, max: 1024 }
 );
 
-export const style = (feature: Feature, resolution: number) => {
+export const style = (feature: Feature) => {
   const type = feature.get('type');
   const isSelected = feature.get('isSelected') === true;
   // console.log({ caller: 'style', type, isSelected });
-  if (styleRequiresFeature(type)) {
-    return getStyle(type, isSelected, feature);
+  if (styleRequiresFeatureAndZoom(type)) {
+    const zoom = Math.floor(getState().zoom);
+    return getStyle(type, isSelected, feature, zoom);
   }
-  return getStyle(type, isSelected, null);
+  if (styleRequiresFeature(type)) {
+    return getStyle(type, isSelected, feature, null);
+  }
+  return getStyle(type, isSelected, null, null);
 };
 
 export default style;