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]}/${
+          `/map/${getState().provider}/${centerLonLat[0]}/${
-            center[1]
+            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,
+      distance: 50,
-      //minDistance: 200,
+      minDistance: 10,
       geometryFunction: (feature: Feature) => {
         // console.log({
         //   caller: 'Map / Cluster / geometryFunction',
@@ -325,13 +327,13 @@ const Map: Component = () => {
         // });
 
         return new Feature({
-          geometry: new Point(
+          // geometry: new Point(
-            toLonLat(
+          //   toLonLat(
-              olExtent.getCenter(point.getExtent()),
+          //     olExtent.getCenter(point.getExtent()),
-              olMap.getView().getProjection()
+          //     olMap.getView().getProjection()
-            )
+          //   )
-          ),
+          // ),
-          //            point,
+          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) => [
+              coordinates: rte().rtept.map((rtept: any) =>
-                rtept.$.lon,
+                fromLonLat([rtept.$.lon, rtept.$.lat])
-                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) => [
+              coordinates: trkseg().trkpt.map((trkpt: any) =>
-                trkpt.$.lon,
+                fromLonLat([trkpt.$.lon, trkpt.$.lat])
-                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',

src/db/lib.ts

@@ -14,29 +14,35 @@ export const put = async (
 ) => {
   const targetDb = local ? localDb : db;
   let current;
+  let putDoc;
   try {
     current = await targetDb.get(_id);
   } catch {
     current = { _rev: undefined, doc: cloneDeep(defaultDoc) };
   }
   try {
-    await targetDb.put({
+    putDoc = {
       _id,
       _rev: current._rev,
       type,
       doc: update(current.doc),
-    });
+    };
+    await targetDb.put(putDoc);
   } catch (error: any) {
     if (error.name === 'conflict') {
-      console.log({ caller: 'db.put', _id, type, defaultDoc, error });
+      console.log({ caller: 'db.put', _id, type, putDoc, defaultDoc, error });
       await put(_id, type, update, defaultDoc, local);
     } else {
-      console.error({ caller: 'db.put', _id, type, defaultDoc, error });
+      console.error({ caller: 'db.put', _id, type, putDoc, defaultDoc, error });
     }
   }
 };
 
-export const getFamily = async (key: string, options: any = {}, local: boolean = false) => {
+export const getFamily = async (
+  key: string,
+  options: any = {},
+  local: boolean = false
+) => {
   const targetDb = local ? localDb : db;
   return await targetDb.allDocs({
     startkey: key,

src/lib/ClusterableVectorTileSourceProxy.ts

@@ -9,7 +9,7 @@ interface Options {
 class ClusterableVectorTileSourceProxy {
   extent?: Extent;
   resolution?: number;
-  extentProjected?: Extent;
+//  extentProjected?: Extent;
   featuresSent: boolean = false;
   proxy?: typeof Proxy;
 
@@ -19,13 +19,13 @@ class ClusterableVectorTileSourceProxy {
         this.resolution = resolution;
         if (this.extent === undefined || !equals(this.extent, extent)) {
           this.extent = extent;
-          const projection = target.getProjection();
+        //   const projection = target.getProjection();
-          if (projection != null) {
+        //   if (projection != null) {
-            this.extentProjected = fromLonLat(
+        //     this.extentProjected = fromLonLat(
-              extent.slice(0, 2),
+        //       extent.slice(0, 2),
-              projection
+        //       projection
-            ).concat(fromLonLat(extent.slice(2), this.projection));
+        //     ).concat(fromLonLat(extent.slice(2), this.projection));
-          }
+        //   }
         }
         if (!this.featuresSent) {
           target.dispatchEvent('change');
@@ -46,8 +46,8 @@ class ClusterableVectorTileSourceProxy {
     getFeatures: (target: VectorTileSource) => {
       return () => {
         const result =
-          this.extentProjected !== undefined
+          this.extent !== undefined
-            ? target.getFeaturesInExtent(this.extentProjected)
+            ? target.getFeaturesInExtent(this.extent)
             : [];
         this.featuresSent = true;
         //   console.log({