Working on styles.

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);