CDP #428 - Preload map data #464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

dleadbetter merged 16 commits into develop from feature/cdp428_preload_map

Feb 4, 2026

.env.example

-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,11 @@ MONGODB_URI=mongodb+srv://... @@
     # Authorization secret string
     NEXTAUTH_SECRET=1234567
+    # If true, map data will be preloaded at build time. This will require a rebuild each time we want to update the site
+    # to display the most up-to-date map data. This should always be set to "true" for sites that use detailed polygon
+    # map data.
+    PRELOAD_MAP=false
     # AWS credentials for media storage
     S3_ACCESS_KEY=abcdefg
     S3_SECRET_KEY=hijklmnop
@@ Expand Down @@

astro.config.mjs

-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,12 @@ export default defineConfig({ @@
       },
       env: {
         schema: {
+          PRELOAD_MAP: envField.boolean({
+            access: 'public',
+            context: 'client',
+            default: false,
+            optional: true
+          }),
           STATIC_BUILD: envField.boolean({
             access: 'public',
             context: 'client',
@@ Expand Down @@

package-lock.json

Large diffs are not rendered by default.

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -36,16 +36,19 @@
  
        "@nanostores/react": "^0.7.3",

        "@netlify/functions": "^2.8.2",

        "@octokit/rest": "^21.0.2",

        "@performant-software/core-data": "^3.1.11",

        "@performant-software/geospatial": "^3.1.11",

        "@performant-software/shared-components": "^3.1.11",

        "@peripleo/maplibre": "^0.8.7",

        "@peripleo/peripleo": "^0.8.7",

        "@performant-software/core-data": "^3.1.13",

        "@performant-software/geospatial": "^3.1.13",

        "@performant-software/shared-components": "^3.1.13",

        "@peripleo/maplibre": "^0.8.8",

        "@peripleo/peripleo": "^0.8.8",

        "@samvera/clover-iiif": "2.9.1",

        "@tailwindcss/typography": "^0.5.16",

        "@tailwindcss/vite": "^4.1.4",

        "@tinacms/cli": "^1.9.2",

        "@tinacms/datalayer": "^1.3.14",

        "@turf/bbox": "^7.3.3",

        "@turf/helpers": "^7.3.3",

        "@turf/truncate": "^7.3.3",

        "@types/react": "^18.2.48",

        "@types/react-dom": "^18.2.18",

        "abstract-level": "^1.0.4",

    @@ -73,7 +76,7 @@
  
        "tailwindcss": "^4.1.4",

        "tinacms": "^2.7.2",

        "tinacms-authjs": "^10.0.2",

        "typescript": "^5.7.3",

        "typescript": "^5.9.3",

        "typesense-instantsearch-adapter": "^2.7.1",

        "underscore": "^1.13.6",

        "uuid": "^11.1.0"

src/apps/search/map/MapLayout.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -110,7 +110,12 @@ const MapLayout = () => { @@
       }, [left, rightOpen]);
       return (
-        <PanelHistoryContext.Provider value={{panelHistory, setPanelHistory}}>
+        <PanelHistoryContext.Provider
+          value={{
+            panelHistory,
+            setPanelHistory
+          }}
+        >
           <div
             className='absolute left-0 right-0 bottom-0 top-[64px]'
           >
@@ Expand Down @@

src/apps/search/map/MapSearch.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,19 +1,20 @@
  
    import MapLayout from '@apps/search/map/MapLayout';

    import { MapSearchContextProvider } from '@apps/search/map/MapSearchContext';

    import MapSearchProvider from '@apps/search/map/MapSearchProvider';

    import { RuntimeConfigProvider } from '@apps/search/SearchConfigContext';

    import TypesenseSearch from '@apps/search/TypesenseSearch';

    import TranslationContext from '@contexts/TranslationContext';

    import { useTranslations } from '@i18n/useTranslations';

    import { Peripleo, Router } from '@peripleo/peripleo';

    import MapLayout from '@apps/search/map/MapLayout';

    import { RuntimeConfigProvider } from '@apps/search/SearchConfigContext';

    import MapSearchProvider from '@apps/search/map/MapSearchProvider';

    interface Props {

      allowSave?: boolean;

      lang: string;

      name: string;

      preload?: boolean;

    }

    const MapSearch = ({allowSave, lang, name}: Props) => {

    const MapSearch = ({ allowSave, lang, name, preload }: Props) => {

      const { t } = useTranslations();

      return (

    @@ -22,19 +23,20 @@ const MapSearch = ({allowSave, lang, name}: Props) => {
  
        >

          <Router>

            <Peripleo>

              <MapSearchContextProvider

                allowSave={allowSave}

              >

                <TypesenseSearch>

                  <MapSearchProvider>

              <TypesenseSearch>

                <MapSearchProvider>

                  <MapSearchContextProvider

                    allowSave={allowSave}

                    preload={preload}

                  >

                    <TranslationContext.Provider

                      value={{lang, t}}

                    >

                      <MapLayout />

                    </TranslationContext.Provider>

                  </MapSearchProvider>

                </TypesenseSearch>

              </MapSearchContextProvider>

                  </MapSearchContextProvider>

                </MapSearchProvider>

              </TypesenseSearch>

            </Peripleo>

          </Router>

        </RuntimeConfigProvider>

src/apps/search/map/MapSearchContext.tsx

-Original file line number
+Diff line change
@@ -1,8 +1,18 @@
+    import { useSearchConfig } from '@apps/search/SearchConfigContext';
+    import { fetchGeometries } from '@backend/api/geometry';
+    import { Typesense as TypesenseUtils, useCachedHits } from '@performant-software/core-data';
+    import { Map as MapUtils } from '@performant-software/geospatial';
+    import { useLoadedMap } from '@peripleo/maplibre';
+    import { GeoJSONSource, LngLatBoundsLike } from 'maplibre-gl';
     import {
       createContext,
+      useCallback,
+      useEffect,
+      useMemo,
       useState,
       type ReactNode
     } from 'react';
+    import _ from 'underscore';
     interface BoundingBoxOptions {
       padding: {
@@ Expand All / @@ -14,11 +24,27 @@ interface BoundingBoxOptions { @@
       maxZoom: number;
     }
+    interface Feature {
+      id: number;
+      type: 'Feature';
+      properties: any;
+      geometry: any;
+    }
+    export const LayerTypes = {
+      single: 'single',
+      multiple: 'multiple'
+    };
     interface SearchContextType {
       allowSave: boolean;
       boundingBoxOptions: BoundingBoxOptions;
-      setBoundingBoxOptions(boundingBoxOptions: BoundingBoxOptions): void;
       controlsClass?: string;
+      features: Feature[];
+      getBoundingBox(): Promise<LngLatBoundsLike>;
+      getGeometry(id: string): Feature;
+      layerType: typeof LayerTypes.single | typeof LayerTypes.multiple;
+      setBoundingBoxOptions(boundingBoxOptions: BoundingBoxOptions): void;
       setControlsClass(controlsClass: string): void;
     }
@@ Expand All @@
     interface Props {
       allowSave?: boolean;
       children: ReactNode;
+      preload?: boolean;
     }
-    export const MapSearchContextProvider = ({ allowSave, children }: Props) => {
+    interface GeometryCache {
+      [id: string]: any;
+    }
+    export const MapSearchContextProvider = ({ allowSave, children, preload }: Props) => {
       const [boundingBoxOptions, setBoundingBoxOptions] = useState<BoundingBoxOptions>();
       const [controlsClass, setControlsClass] = useState<string>();
+      const [features, setFeatures] = useState<Feature[]>([]);
+      const [geometryCache, setGeometryCache] = useState<GeometryCache>({});
+      const [geometries, setGeometries] = useState<any>({});
+      const config = useSearchConfig();
+      const hits = useCachedHits();
+      const map = useLoadedMap();
+      /**
+       * Returns a promise that resolves the bounding box for all visible features.
+       */
+      const getBoundingBox = useCallback(() => new Promise<LngLatBoundsLike>((resolve) => {
+        if (!map) {
+          return;
+        }
+        const promises = [];
+        _.each(features, (feature) => {
+          if (feature.properties.visible) {
+            const id = feature.properties.uuid;
+            const source = map.getSource(`source-${id}`) as unknown as GeoJSONSource;
+            const cached = geometryCache[id];
+            /**
+             * In order to calculate the bounding box for multiple layers, we'll need to get the GeoJSON data
+             * for all layers. We can do this using the `source.getData()` async function, but this incurs a
+             * performance penalty. As a result, we do not want to do this each time we're calculating the
+             * bounding box. Instead, we'll call source.getData() exactly once per layer and cache results.
+             */
+            if (cached) {
+              promises.push(Promise.resolve(cached));
+            } else if (!preload) {
+              promises.push(Promise.resolve(feature));
+            } else {
+              promises.push(source.getData());
+            }
+          }
+        });
+        Promise.all(promises)
+          .then((data) => {
+            // Set the fetched data in the geometry cache
+            setGeometryCache((prevCache) => ({
+              ...prevCache,
+              ..._.indexBy(data, (d) => d.properties.uuid)
+            }));
+            // Calculate the bounding box
+            const featureCollection = MapUtils.toFeatureCollection(data);
+            const bbox = MapUtils.getBoundingBox(featureCollection);
+            resolve(bbox);
+          });
+      }), [features, geometryCache, map, preload]);
+      /**
+       * Returns the cached geometry record for the item with the passed ID.
+       */
+      const getGeometry = useCallback((id) => geometryCache[id], [geometryCache]);
+      /**
+       * Memo-izes the layer type based on whether or not the map is preloaded.
+       */
+      const layerType = useMemo(() => preload ? LayerTypes.multiple : LayerTypes.single, [preload]);
+      /**
+       * Updates the set of features when the geometries or hits are changed.
+       */
+      useEffect(() => {
+        const options = {};
+        if (config.map.cluster_radius) {
+          _.extend(options, { type: 'Point' });
+        }
+        if (preload) {
+          _.extend(options, { geometries });
+        }
+        setFeatures(TypesenseUtils.getFeatures(features, hits, config.map.geometry, options));
+      }, [geometries, hits]);
+      /**
+       * Fetches the current page of geometry records.
+       */
+      useEffect(() => {
+        if (!preload) {
+          return;
+        }
+        fetchGeometries()
+          .then((data) => _.indexBy(data, 'id'))
+          .then(setGeometries);
+      }, []);
       return (
         <MapSearchContext.Provider
           value={{
             allowSave,
             boundingBoxOptions,
             controlsClass,
+            features,
+            getBoundingBox,
+            getGeometry,
+            layerType,
             setBoundingBoxOptions,
             setControlsClass
           }}
@@ Expand Down @@

src/apps/search/map/MapSearchProvider.tsx

-Original file line number
+Diff line change
@@ -1,4 +1,4 @@
-    import type { ReactNode } from 'react';
+    import { ReactNode } from 'react';
     import { useGeoSearch, useInfiniteHits, useSearchBox } from 'react-instantsearch';
     import { PersistentSearchStateContextProvider } from '@performant-software/core-data';
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CDP #428 - Preload map data #464

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!