Don't use useGeographic anymore since it doesn't work with clusters.

src/components/map/Map.tsx

@@ -10,12 +10,16 @@ import Attribution from 'ol/control/Attribution';
 import Rotate from 'ol/control/Rotate';
 import ScaleLine from 'ol/control/ScaleLine';
 import Control from 'ol/control/Control';
-import { toLonLat, useGeographic as olUseGeographic } from 'ol/proj';
+import {
+  fromLonLat,
+  toLonLat,
+  useGeographic as olUseGeographic,
+} from 'ol/proj';
 import DragRotate from 'ol/interaction/DragRotate';
 
 import 'ol/ol.css';
 import './Map.css';
-import { Collection, VectorTile } from 'ol';
+import { Collection } from 'ol';
 import { Point } from 'ol/geom';
 import { Style, Icon, Circle, Fill } from 'ol/style';
 import GetLocation, { getCurrentLocation } from '../get-location';
@@ -39,7 +43,7 @@ import Infos, { clickHandler } from '../infos';
 import GpxDialog from '../gpx-dialog';
 import GpxRecord from '../gpx-record';
 import dispatch from '../../workers/dispatcher-main';
-import { debounce, floor } from 'lodash';
+import { debounce } from 'lodash';
 
 import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen';
 import Account from '../account';
@@ -48,10 +52,6 @@ import VectorTileLayer from 'ol/layer/VectorTile';
 import VectorTileSource from 'ol/source/VectorTile.js';
 import MVT from 'ol/format/MVT.js';
 import style from '../gpx/styles';
-import { DepartureBoard } from '@suid/icons-material';
-import deTileVectorSource from '../../lib/de-tile-vector-source';
-import ClusterableVectorTileSource from '../../lib/ClusterableVectorTileSource';
-import clusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
 import ClusterableVectorTileSourceProxy from '../../lib/ClusterableVectorTileSourceProxy';
 
 const [getState, setState] = createSignal({
@@ -159,7 +159,7 @@ const Map: Component = () => {
 
     const view = map?.getView();
     view?.animate({
-      center: [getState().lon, getState().lat],
+      center: fromLonLat([getState().lon, getState().lat]),
       rotation: getState().rotation,
       zoom: getState().zoom,
       duration: 1000,
@@ -178,7 +178,7 @@ const Map: Component = () => {
         .at(1)
         ?.getSource() as VectorSource;
       source!.clear(true);
-      const point = new Point([location.lon, location.lat]);
+      const point = new Point(fromLonLat([location.lon, location.lat]));
       const style = new Style({
         image: new Icon({
           //      size: [20, 20],
@@ -209,16 +209,17 @@ const Map: Component = () => {
   });
 
   onMount(async () => {
-    olUseGeographic();
+    //  olUseGeographic();
 
     const changeListener = (event: any) => {
       const map = getMap();
       const view = map?.getView();
       const center = view?.getCenter();
       if (center) {
+        const centerLonLat = toLonLat(center);
         navigate(
-          `/map/${getState().provider}/${center[0]}/${
-            center[1]
+          `/map/${getState().provider}/${centerLonLat[0]}/${
+            centerLonLat[1]
           }/${view?.getZoom()}/${view?.getRotation()}`
         );
       }
@@ -229,6 +230,7 @@ const Map: Component = () => {
           ...params,
         },
         map,
+        center,
       });
     };
 
@@ -250,7 +252,7 @@ const Map: Component = () => {
 
     const olMap = new OlMap({
       view: new View({
-        center: [+getState().lon, +getState().lat],
+        center: fromLonLat([+getState().lon, +getState().lat]),
         zoom: +getState().zoom,
         rotation: +getState().rotation,
       }),
@@ -297,8 +299,8 @@ const Map: Component = () => {
 
     const clusterSource = new Cluster({
       source: clusterableVectorTileSource,
-      distance: 4000000,
-      //minDistance: 200,
+      distance: 50,
+      minDistance: 10,
       geometryFunction: (feature: Feature) => {
         // console.log({
         //   caller: 'Map / Cluster / geometryFunction',
@@ -325,13 +327,13 @@ const Map: Component = () => {
         // });
 
         return new Feature({
-          geometry: new Point(
-            toLonLat(
-              olExtent.getCenter(point.getExtent()),
-              olMap.getView().getProjection()
-            )
-          ),
-          //            point,
+          // geometry: new Point(
+          //   toLonLat(
+          //     olExtent.getCenter(point.getExtent()),
+          //     olMap.getView().getProjection()
+          //   )
+          // ),
+          geometry: point,
           features: features,
           type: 'cluster',
         });

src/components/rte/Rte.tsx

@@ -7,6 +7,7 @@ import {
   createCachedSignal,
   destroyCachedSignal,
 } from '../../workers/cached-signals';
+import { fromLonLat } from 'ol/proj';
 
 interface Props {
   rteId: string;
@@ -43,7 +44,10 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [rte().rtept[0].$.lon, rte().rtept[0].$.lat],
+              coordinates: fromLonLat([
+                rte().rtept[0].$.lon,
+                rte().rtept[0].$.lat,
+              ]),
             },
             properties: {
               type: 'rte-start',
@@ -56,10 +60,9 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
             type: 'Feature',
             geometry: {
               type: 'LineString',
-              coordinates: rte().rtept.map((rtept: any) => [
-                rtept.$.lon,
-                rtept.$.lat,
-              ]),
+              coordinates: rte().rtept.map((rtept: any) =>
+                fromLonLat([rtept.$.lon, rtept.$.lat])
+              ),
             },
             properties: {
               type: 'rte',
@@ -72,7 +75,10 @@ export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [rte().rtept.at(-1).$.lon, rte().rtept.at(-1).$.lat],
+              coordinates: fromLonLat([
+                rte().rtept.at(-1).$.lon,
+                rte().rtept.at(-1).$.lat,
+              ]),
             },
             properties: {
               type: 'rte-finish',

src/components/trkseg/Trkseg.tsx

@@ -7,6 +7,7 @@ import {
   createCachedSignal,
   destroyCachedSignal,
 } from '../../workers/cached-signals';
+import { fromLonLat } from 'ol/proj';
 
 interface Props {
   trksegId: string;
@@ -56,7 +57,10 @@ export const Trkseg: Component<Props> = ({
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [trkseg().trkpt[0].$.lon, trkseg().trkpt[0].$.lat],
+              coordinates: fromLonLat([
+                trkseg().trkpt[0].$.lon,
+                trkseg().trkpt[0].$.lat,
+              ]),
             },
             properties: {
               type: 'trkseg-start',
@@ -69,10 +73,9 @@ export const Trkseg: Component<Props> = ({
             type: 'Feature',
             geometry: {
               type: 'LineString',
-              coordinates: trkseg().trkpt.map((trkpt: any) => [
-                trkpt.$.lon,
-                trkpt.$.lat,
-              ]),
+              coordinates: trkseg().trkpt.map((trkpt: any) =>
+                fromLonLat([trkpt.$.lon, trkpt.$.lat])
+              ),
             },
             properties: {
               type: 'trkseg',
@@ -85,10 +88,10 @@ export const Trkseg: Component<Props> = ({
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [
+              coordinates: fromLonLat([
                 trkseg().trkpt.at(-1).$.lon,
                 trkseg().trkpt.at(-1).$.lat,
-              ],
+              ]),
             },
             properties: {
               type: 'trkseg-finish',

src/components/wpt/Wpt.tsx

@@ -8,6 +8,7 @@ import {
   createCachedSignal,
   destroyCachedSignal,
 } from '../../workers/cached-signals';
+import { fromLonLat } from 'ol/proj';
 
 interface Props {
   wptId: string;
@@ -61,7 +62,7 @@ export const Wpt: Component<Props> = ({
             type: 'Feature',
             geometry: {
               type: 'Point',
-              coordinates: [wpt()?.$.lon, wpt()?.$.lat],
+              coordinates: fromLonLat([wpt()?.$.lon, wpt()?.$.lat]),
             },
             properties: {
               type: 'wpt',