Huge and dirty refactoring of the vector tile stuff.

src/components/map/Map.tsx

@@ -49,7 +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';
+import { Overlays } from '../overlays/Overlays';
 
 const [getState, setState] = createSignal({
   lon: 0,

src/components/map/Overlays.tsx

@@ -1,98 +0,0 @@
-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 <></>;
-};