Working on styles.

src/components/gpx/styles.ts

@@ -22,6 +22,7 @@ import { createDefaultStyle } from 'ol/style/Style';
 
 import osmIcons, { highlight } from './osm-icons';
 import { indexOf } from 'lodash';
+import { getZoomInteger } from '../map/Map';
 
 interface StyleParameters {
   type: string;
@@ -159,8 +160,6 @@ const memoizeOptions = {
   max: 1024000,
 };
 
-const zoom = () => Math.floor(getState().zoom);
-
 const styles = {
   wpt: {
     getParameters: (feature: Feature) => {
@@ -169,7 +168,7 @@ const styles = {
         isSelected: feature.get('isSelected') ?? false,
         text: feature.get('name'),
         customIcon: icons[feature.get('sym') as keyof typeof icons],
-        hidden: minZoom && zoom() < minZoom,
+        hidden: minZoom && getZoominteger() < minZoom,
       };
     },
     getStyle: memoize((params: any) => {
@@ -195,8 +194,8 @@ const styles = {
     getParameters: (feature: Feature) => {
       return {
         isSelected: feature.get('isSelected') ?? false,
-        feature: zoom() >= 7 ? feature : undefined,
-        zoom: zoom() >= 7 ? Math.floor(zoom()) : undefined,
+        feature: getZoomInteger() >= 7 ? feature : undefined,
+        zoom: getZoomInteger() >= 7 ? Math.floor(getZoomInteger()) : undefined,
       };
     },
     getStyle: memoize((params: any) => {
@@ -334,9 +333,11 @@ const styles = {
         name: feature.get('name'),
         klass,
         isHighlighted,
-        isTextHidden: zoom() < 19,
-        //       isHidden: !isHighlighted && zoom() < 16,
-        isHidden: true,
+        isTextHidden: getZoomInteger() < 19,
+        //       isHidden: !isHighlighted && getZoomInteger() < 16,
+        isHidden:
+          (feature.get('sub-type') === 'tourism' && getZoomInteger() < 14) ||
+          (feature.get('sub-type') !== 'tourism' && getZoomInteger() < 16),
       };
     },
     getStyle: memoize((params: any) => {
@@ -374,6 +375,35 @@ const styles = {
       });
     }, memoizeOptions),
   },
+  cluster: {
+    getParameters: (feature: Feature) => {
+      const nbFeatures = feature.get('features').length;
+      //      console.log({ caller: 'cluster / getParameters', feature, nbFeatures });
+      return {
+        nbFeatures,
+        subFeature: nbFeatures === 1 ? feature.get('features')[0] : undefined,
+      };
+    },
+    getStyle: memoize((params: any) => {
+      //      console.log({ caller: 'cluster / getStyle', params });
+      const { nbFeatures } = params;
+      return new Style({
+        image: new Circle({
+          radius: 15,
+          fill: new Fill({ color: [174, 33, 219, 0.7] }),
+        }),
+        text: new Text({
+          text: `${nbFeatures}`,
+          font: 'bold 14px "Open Sans", "Arial Unicode MS", "sans-serif"',
+          offsetY: +0,
+          padding: [0, 0, 0, 0],
+          fill: new Fill({
+            color: 'black',
+          }),
+        }),
+      });
+    }, memoizeOptions),
+  },
 };
 
 export const style = (feature: Feature, resolution: number) => {
@@ -389,13 +419,16 @@ export const style = (feature: Feature, resolution: number) => {
   if (params?.isHidden) {
     return null;
   }
+  // if (params.subFeature) {
+  //   return style(params.subFeature, resolution);
+  // }
   const getStyle = styles[type].getStyle;
-  const style = getStyle(params);
+  const result = getStyle(params);
   //  console.log({ caller: 'style', feature, type, params, style });
-  if (style === undefined) {
+  if (result === undefined) {
     return createDefaultStyle(feature, resolution)[0];
   }
-  return style;
+  return result;
 };
 
 export default style;

src/components/map/Map.tsx

@@ -58,7 +58,9 @@ const [getState, setState] = createSignal({
   provider: 'osm',
 });
 
-export { getState };
+const getZoomInteger = () => Math.floor(getState().zoom);
+
+export { getState, getZoomInteger };
 
 const [getMap, setMap] = createSignal<OlMap | null>(null);
 
@@ -295,14 +297,14 @@ const Map: Component = () => {
 
     const clusterSource = new Cluster({
       source: clusterableVectorTileSource,
-      distance: 50,
+      distance: 30,
       minDistance: 10,
       geometryFunction: (feature: Feature) => {
         // console.log({
         //   caller: 'Map / Cluster / geometryFunction',
         //   feature,
         // });
-        if (feature.get('sub-type') === 'tourism') {
+        if (getZoomInteger() < 14 && feature.get('sub-type') === 'tourism') {
           return feature.getGeometry();
         }
         return null;
@@ -325,19 +327,7 @@ const Map: Component = () => {
     let clusterLayer = new VectorLayer({
       source: clusterSource,
       zIndex: Infinity,
-      //      style,
-      style: function (feature) {
-        // console.log({
-        //   caller: 'Map / Cluster / style',
-        //   feature,
-        // });
-        return new Style({
-          image: new Circle({
-            radius: 20,
-            fill: new Fill({ color: 'black' }),
-          }),
-        });
-      },
+      style,
     });
 
     olMap.addLayer(vectorTileLayer);