Merge pull request #477 from performant-software/feature/cdp139_map_clustering

CDP #139 - Map clustering

Author: dleadbetter

packages/core-data/package.json

@@ -47,8 +47,8 @@
   "peerDependencies": {
     "@performant-software/geospatial": "^2.3.8",
     "@performant-software/shared-components": "^2.3.8",
-    "@peripleo/maplibre": "^0.5.2",
-    "@peripleo/peripleo": "^0.5.2",
+    "@peripleo/maplibre": "^0.8.7",
+    "@peripleo/peripleo": "^0.8.7",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/core-data/src/components/SearchResultsLayer.js

@@ -2,10 +2,7 @@
 
 import { LocationMarkers, Map as MapUtils } from '@performant-software/geospatial';
 import { useMap } from '@peripleo/maplibre';
-import React, { useEffect, useMemo, useState } from 'react';
-import _ from 'underscore';
-import TypesenseUtils from '../utils/Typesense';
-import { useCachedHits, useSearching } from '../hooks/Typesense';
+import React, { useEffect, useState } from 'react';
 
 type Props = {
   /**
@@ -23,6 +20,11 @@ type Props = {
    */
   buffer?: number,
 
+  /**
+   * The GeoJSON data representing the location.
+   */
+  data: { [key: string]: any },
+
   /**
    * If `true`, the map will fit the bounding box around the passed data.
    */
@@ -32,6 +34,11 @@ type Props = {
    * Path to the geometry attribute for each result.
    */
   geometry: string,
+
+  /**
+   * If `true`, the bounding box will not be fit.
+   */
+  searching?: boolean
 };
 
 /**
@@ -40,37 +47,26 @@ type Props = {
 const SearchResultsLayer = (props: Props) => {
   const [mapLoaded, setMapLoaded] = useState(false);
 
-  const hits = useCachedHits();
   const map = useMap();
-  const isSearching = useSearching();
-
-  /**
-   * Memo-ize the Typesense hits as a feature collection.
-   *
-   * @type {unknown}
-   */
-  const data = useMemo(() => (
-    !_.isEmpty(hits) && TypesenseUtils.toFeatureCollection(hits, props.geometry)
-  ), [hits, props.geometry]);
 
   /**
    * Here we'll implement our own fitting of the bounding box once the search has completed and the map has loaded,
    * rather than using the default implementation in LocationMarker that will change when the "data" prop changes.
    */
   const boundingBoxDependencies = [
-    data,
     mapLoaded,
-    isSearching,
     props.boundingBoxData,
     props.boundingBoxOptions,
     props.buffer,
-    props.fitBoundingBox
+    props.data,
+    props.fitBoundingBox,
+    props.searching
   ];
 
   useEffect(() => {
-    if (props.fitBoundingBox && data && mapLoaded && !isSearching) {
+    if (props.fitBoundingBox && props.data && mapLoaded && !props.searching) {
       // Set the bounding box on the map
-      const bbox = MapUtils.getBoundingBox(data, props.buffer);
+      const bbox = MapUtils.getBoundingBox(props.data, props.buffer);
 
       if (bbox) {
         map.fitBounds(bbox, props.boundingBoxOptions, props.boundingBoxData);
@@ -94,14 +90,14 @@ const SearchResultsLayer = (props: Props) => {
     };
   }, [map]);
 
-  if (!data) {
+  if (!props.data) {
     return null;
   }
 
   return (
     <LocationMarkers
       {...props}
-      data={data}
+      data={props.data}
       fitBoundingBox={false}
     />
   );

packages/core-data/src/utils/Typesense.js

@@ -7,6 +7,10 @@ import TypesenseInstantsearchAdapter from 'typesense-instantsearch-adapter';
 import _ from 'underscore';
 import type { TypesenseSearchResult } from '../types/typesense/SearchResult';
 
+type Options = {
+  type?: string
+};
+
 type TypesenseConfig = {
   api_key: string,
   host: string,
@@ -174,10 +178,11 @@ const toFeature = (record: any, item: any, geometry: any) => {
  *
  * @param results
  * @param path
+ * @param options
  *
  * @returns {FeatureCollection<Geometry, Properties>}
  */
-const toFeatureCollection = (results: Array<any>, path: string) => {
+const toFeatureCollection = (results: Array<any>, path: string, options: Options = {}) => {
   const features = [];
 
   const objectPath = path.substring(0, path.lastIndexOf(ATTRIBUTE_DELIMITER));
@@ -193,7 +198,9 @@ const toFeatureCollection = (results: Array<any>, path: string) => {
     _.each(geometryObjects, (geometryObject) => {
       const geometry = _.get(geometryObject, geometryPath);
 
-      if (geometry) {
+      const include = geometry && (!options.type || geometry.type === options.type);
+
+      if (include) {
         const record = _.find(features, (f) => f.properties?.uuid === geometryObject.uuid);
 
         if (record) {

packages/geospatial/package.json

@@ -29,7 +29,7 @@
     "underscore": "^1.13.6"
   },
   "peerDependencies": {
-    "@peripleo/maplibre": "^0.5.1",
+    "@peripleo/maplibre": "^0.8.7",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/geospatial/src/components/LocationMarkers.js

@@ -68,6 +68,11 @@ type Props = {
    */
   fitBoundingBox?: boolean,
 
+  /**
+   * If `true`, the selection and hover state will apply to the layer.
+   */
+  interactive?: boolean,
+
   /**
    * An ID value to apply to the layer.
    */
@@ -133,6 +138,7 @@ const LocationMarkers = (props: Props) => {
         data={props.data}
         fillStyle={props.fillStyle}
         id={props.layerId}
+        interactive={props.interactive}
         strokeStyle={props.strokeStyle}
         pointStyle={props.pointStyle}
       />