Adding a simple cache to keep track of points

src/components/map/CurrentLocation.tsx

@@ -23,6 +23,7 @@ export const CurrentLocation: react.FC<CurrentLocationProperties> = (
   return location !== null ? (
     <Marker
       key='currentLocation'
+      id='currentLocation'
       coordinates={location}
       icon={
         <circle

src/components/map/Marker.tsx

@@ -1,8 +1,10 @@
-import react, { ReactNode } from 'react';
+import react, { ReactNode, useEffect } from 'react';
 import { lat2tile, lon2tile } from '../../lib/geo';
+import cache from '../../lib/cache';
 import { geoPoint, Rectangle, TileKeyObject } from './types';
 
 export interface MarkerProperties {
+  id: string;
   coordinates: geoPoint;
   icon: ReactNode;
   keyObject?: TileKeyObject;
@@ -14,6 +16,14 @@ export interface MarkerProperties {
 export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
   console.log(`Rendering Marker`);
 
+  useEffect(() => {
+    console.log(`Marker onMount, id:${props.id}`);
+    return () => {
+      console.log(`Marker onUnmount, id:${props.id}`);
+      cache.delete({ cacheId: 'points', key: props.id });
+    };
+  }, []);
+
   if (
     props.keyObject === undefined ||
     props.zoom === undefined ||
@@ -31,11 +41,17 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
     y < props.viewPort.topLeft.y ||
     y > props.viewPort.bottomRight.y + 1
   ) {
+    cache.delete({ cacheId: 'points', key: props.id });
     console.log(
       `Marker ${x}, ${y} out of viewport: ${JSON.stringify(props.viewPort)} `
     );
     return null;
   }
+  cache.set({
+    cacheId: 'points',
+    key: props.id,
+    value: { id: props.id, coordinates: props.coordinates },
+  });
   return (
     <g
       transform={`translate(${(x - props.keyObject.x) * 256}, ${

src/components/map/Trkseg.tsx

@@ -50,6 +50,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
       {trkseg[1] !== undefined ? (
         <>
           <Marker
+            id={`${props.id}/start`}
             coordinates={trkseg[1].doc.doc.$ as geoPoint}
             key='start'
             keyObject={props.keyObject}
@@ -67,6 +68,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
 
           <path d={d} pointerEvents='none' className={css.track} />
           <Marker
+            id={`${props.id}/finish`}
             coordinates={trkseg.at(-1).doc.doc.$ as geoPoint}
             key='finish'
             keyObject={props.keyObject}

src/lib/cache.ts

@@ -0,0 +1,54 @@
+/**
+ * @hidden
+ */
+export const thisIsAModule = true;
+
+/**
+ *
+ */
+
+declare global {
+  var _allCaches: any;
+}
+
+globalThis._allCaches = new Map();
+
+const cache = {
+  set: (params: any) => {
+    const { cacheId, key, value } = params;
+    if (!_allCaches.has(cacheId)) {
+      _allCaches.set(cacheId, new Map());
+    }
+    const k = _allCaches.get(cacheId);
+    k.set(key, value);
+  },
+  get: (params: any) => {
+    const { cacheId, key } = params;
+    if (!_allCaches.has(cacheId)) {
+      return null;
+    }
+    const k = _allCaches.get(cacheId);
+    if (!k.has(key)) {
+      return null;
+    }
+    const value = k.get(key);
+    k.delete(key);
+    k.set(key, value);
+    return value;
+  },
+  delete: (params: any) => {
+    const { cacheId, key } = params;
+    if (!_allCaches.has(cacheId)) {
+      return null;
+    }
+    const k = _allCaches.get(cacheId);
+    if (!k.has(key)) {
+      return null;
+    }
+    const value = k.get(key);
+    k.delete(key);
+    return value;
+  },
+};
+
+export default cache;