Refactoring and implementing the actual selection of features to display.

src/components/map/Map.tsx

@@ -49,6 +49,7 @@ import VectorTileSource from 'ol/source/VectorTile.js';
 import MVT from 'ol/format/MVT.js';
 import style from '../gpx/styles';
 import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
+import { Overlays } from './Overlays';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -277,69 +278,14 @@ const Map: Component = () => {
     olMap.on(['moveend'], changeListener);
     olMap.on(['singleclick'], clickHandler);
 
-    // // cf https://stackoverflow.com/questions/55161380/openlayers-cluster-with-mvt-vectortilesource-impossible
-
-    const vectorTileSource = new VectorTileSource({
-      url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
-      format: new MVT({ featureClass: Feature }),
-      maxZoom: 14,
-    });
-
-    const vectorTileLayer = new VectorTileLayer({
-      source: vectorTileSource,
-      style,
-      declutter: false,
-    });
-
-    const clusterableVectorTileSource = new ClusterableVectorTileSourceProxy({
-      source: vectorTileSource,
-    });
-
-    const clusterSource = new Cluster({
-      source: clusterableVectorTileSource,
-      distance: 30,
-      minDistance: 10,
-      geometryFunction: (feature: Feature) => {
-        // console.log({
-        //   caller: 'Map / Cluster / geometryFunction',
-        //   feature,
-        // });
-        if (getZoomInteger() < 14 && feature.get('sub-type') === 'tourism') {
-          return feature.getGeometry();
-        }
-        return null;
-      },
-      createCluster: (point: Point, features: Feature[]) => {
-        // console.log({
-        //   caller: 'Map / Cluster / createCluster',
-        //   point,
-        //   features,
-        // });
-
-        return new Feature({
-          geometry: point,
-          features: features,
-          type: 'cluster',
-        });
-      },
-    });
-
-    let clusterLayer = new VectorLayer({
-      source: clusterSource,
-      zIndex: Infinity,
-      style,
-    });
-
-    olMap.addLayer(vectorTileLayer);
-    olMap.addLayer(clusterLayer);
-
     setMap(olMap);
   });
 
   return (
+    //<OsmFetch map={getMap} />
     // @ts-ignore
     <div class='ol-map' ref={target}>
-      <OsmFetch map={getMap} />
+      <Overlays map={getMap} />
       <GetLocation />
       <Forward />
       <Back />

src/components/map/Overlays.tsx

@@ -0,0 +1,98 @@
+import { Component, createEffect, onMount } from 'solid-js';
+import OlMap from 'ol/Map';
+
+import {
+  currentOverlayDefinition,
+  currentOverlayHighlightedDefinition,
+  isHighlighted,
+} from '../map-tile-provider';
+import { Feature } from 'ol';
+import MVT from 'ol/format/MVT';
+import { Point } from 'ol/geom';
+import VectorLayer from 'ol/layer/Vector';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import VectorTileSource from 'ol/source/VectorTile.js';
+import Cluster from 'ol/source/Cluster';
+import { style } from '../gpx/styles';
+import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
+import { getMap, getZoomInteger } from './Map';
+
+interface Props {
+  map: () => OlMap | null;
+}
+
+let clusterLayer: VectorLayer;
+let vectorTileLayer: VectorTileLayer;
+
+export const Overlays: Component<Props> = ({ map }) => {
+  onMount(() => {
+    const vectorTileSource = new VectorTileSource({
+      url: 'https://geo.dyomedea.com/services/spain/tiles/{z}/{x}/{y}.pbf',
+      format: new MVT({ featureClass: Feature }),
+      maxZoom: 14,
+    });
+
+    vectorTileLayer = new VectorTileLayer({
+      source: vectorTileSource,
+      style,
+      declutter: false,
+    });
+
+    const clusterableVectorTileSource = new ClusterableVectorTileSourceProxy({
+      source: vectorTileSource,
+    });
+
+    const clusterSource = new Cluster({
+      source: clusterableVectorTileSource,
+      distance: 30,
+      minDistance: 10,
+      geometryFunction: (feature: Feature) => {
+        // console.log({
+        //   caller: 'Map / Cluster / geometryFunction',
+        //   feature,
+        // });
+        if (getZoomInteger() < 14 && isHighlighted(feature)) {
+          return feature.getGeometry();
+        }
+        return null;
+      },
+      createCluster: (point: Point, features: Feature[]) => {
+        // console.log({
+        //   caller: 'Map / Cluster / createCluster',
+        //   point,
+        //   features,
+        // });
+
+        return new Feature({
+          geometry: point,
+          features: features,
+          type: 'cluster',
+        });
+      },
+    });
+
+    clusterLayer = new VectorLayer({
+      source: clusterSource,
+      zIndex: Infinity,
+      style,
+    });
+  });
+
+  createEffect(() => {
+    const overlayDefinition = currentOverlayDefinition();
+    const overlayHighlightedDefinition = currentOverlayHighlightedDefinition();
+    const olMap = getMap();
+    if (olMap) {
+      olMap.removeLayer(clusterLayer);
+      olMap.removeLayer(vectorTileLayer);
+      if (Object.keys(overlayDefinition).length > 0) {
+        vectorTileLayer.changed();
+        clusterLayer.changed();
+        olMap.addLayer(vectorTileLayer);
+        olMap.addLayer(clusterLayer);
+      }
+    }
+  });
+
+  return <></>;
+};