Share data cache

Author: fallaciousreasoning

src/layers/data.ts

@@ -0,0 +1,8 @@
+const cache = new Map()
+export const getLayerData = <T>(layer: { getData: () => Promise<T> }): Promise<T> => {
+    if (cache.has(layer)) return cache.get(layer)
+
+    const promise = layer.getData()
+    cache.set(layer, promise)
+    return promise
+}

src/layers/huts.ts

@@ -4,6 +4,7 @@ import { fromLonLat } from 'ol/proj';
 import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
 import type { Place } from '../search/places';
 import fragment from '../stores/fragment';
+import { getLayerData } from './data';
 
 const styleCache = {};
 export default {
@@ -43,7 +44,7 @@ export default {
         return data as Place[]
     },
     async getFeatures() {
-        const data = await this.getData()
+        const data = await getLayerData(this)
         return data.map(hut => {
             const coords = fromLonLat([hut.lon, hut.lat]);
             const feature = new Feature(new Point(coords));

src/layers/mountains.ts

@@ -5,6 +5,7 @@ import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
 
 import fragment from '../stores/fragment';
 import mountains, { type Mountains } from '../stores/mountains';
+import { getLayerData } from './data';
 
 const styleCache = {};
 
@@ -42,7 +43,7 @@ export default {
         return result
     },
     async getFeatures() {
-        const data = await this.getData();
+        const data = await getLayerData(this);
         const points = Object.values(data).filter(a => a.latlng);
         return points.map(mountain => {
             const coords = fromLonLat([mountain.latlng![1], mountain.latlng![0]]);

src/search/places.ts

@@ -1,3 +1,4 @@
+import { getLayerData } from '../layers/data';
 import huts from '../layers/huts'
 import mountains from '../layers/mountains';
 
@@ -19,8 +20,8 @@ const makePlacesPromise = async (sources: (() => Promise<Place[]>)[]) => {
 export const getPlaces = () => {
     if (!placesPromise) {
         placesPromise = makePlacesPromise([
-            huts.getData,
-            () => mountains.getData()
+            () => getLayerData(huts),
+            () => getLayerData(mountains)
                 .then(r => Object.entries(r)
                     .filter(([, m]) => m.latlng?.length && m.name)
                     .map(([url, m]) => ({ name: m.name, lat: m.latlng![0], lon: m.latlng![1], type: 'peak', href: url }))),