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) =>
+      text: (feature: Feature, zoom: number) => {
-        new Text({
+        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)) {
+  if (styleRequiresFeatureAndZoom(type)) {
-    return getStyle(type, isSelected, feature);
+    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;

src/components/wpt/Wpt.tsx

@@ -160,6 +160,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
               setEditedWpt({ ...editedWpt(), sym: value });
             }}
           />
+          <TextField
+            label={t('minZoom')}
+            defaultValue={wpt()?.extensions?.['dyo:minZoom']?.toString()}
+            onChange={(event: any, value: string) => {
+              const extensions = {
+                ...editedWpt()?.extensions,
+                'dyo:minZoom': parseFloat(value),
+              };
+              setEditedWpt({ ...editedWpt(), extensions });
+            }}
+          />
           <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
             <Button variant='outlined' color='secondary' onClick={closeHandler}>
               {t('cancel')}

src/db/types.d.ts

@@ -48,6 +48,7 @@ interface Extensions {
   'dyo:accuracy'?: number;
   'dyo:batterylevel'?: number;
   'dyo:useragent'?: string;
+  'dyo:minZoom'?: number;
 }
 
 interface Trk {
@@ -116,4 +117,3 @@ interface Rte {
   extensions?: Extensions;
   rtept?: Wpt[];
 }
-

src/i18n/en.ts

@@ -14,6 +14,8 @@ const dict = {
 
   name: 'Name',
   sym: 'Symbol',
+  minZoom: 'Minimum zoom level',
+
   save: 'SAVE',
   cancel: 'CANCEL',
 };

src/i18n/fr.ts

@@ -15,6 +15,7 @@ const dict = {
 
   name: 'Nom',
   sym: 'Symbole',
+  minZoom: 'Niveau de zoom minimum',
 
   save: 'SAUVEGARDER',
   cancel: 'ANNULER',