Re-trying the class extension approach.

src/components/map/Map.tsx

@@ -366,9 +366,8 @@ const Map: Component = () => {
     //   }
     // });
 
-    const vectorTileSource = new VectorTileSource({
+    const vectorTileSource = new ClusterableVectorTileSource({
       url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
-      format: new MVT({ featureClass: Feature }),
       maxZoom: 14,
     });
 
@@ -378,19 +377,19 @@ const Map: Component = () => {
       declutter: false,
     });
 
-    const clusterableVectorTileSource =
-      clusterableVectorTileSourceProxy(vectorTileSource);
+    // const clusterableVectorTileSource =
+    //   clusterableVectorTileSourceProxy(vectorTileSource);
 
-    clusterableVectorTileSource.init({
-      featureFilter: (feature: Feature, resolution?: number) =>
-        feature.get('type') === 'poi',
-    });
+    // clusterableVectorTileSource.init({
+    //   featureFilter: (feature: Feature, resolution?: number) =>
+    //     feature.get('type') === 'poi',
+    // });
 
     let clusterLayer = new VectorLayer({
       // source: vectorTileMirrorSource,
       source: new Cluster({
         //        source: deTileVectorSource(vectorLayer.getSource()),
-        source: clusterableVectorTileSource,
+        source: vectorTileSource,
         geometryFunction: (feature: Feature) => {
           // console.log({
           //   caller: 'Map / Cluster / geometryFunction',
@@ -434,8 +433,8 @@ const Map: Component = () => {
             type: 'cluster',
           });
         },
-        distance: 100000,
-        minDistance: 0,
+        // distance: 100000,
+        // minDistance: 0,
       }),
       zIndex: Infinity,
       //      style,