@performant-software/geospatial 2.1.0-beta.2 → 2.1.0-beta.20

package/src/components/LocationMarkers.js

@@ -0,0 +1,125 @@
+// @flow
+
+import { GeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect } from 'react';
+import MapStyles from '../utils/MapStyles';
+import MapUtils from '../utils/Map';
+
+type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer: number,
+
+  /**
+   * If true, markers will be clustered before the specified zoom level.
+   */
+  cluster?: boolean,
+
+  /**
+   * Max zoom to cluster points on.
+   */
+  clusterMaxZoom?: number,
+
+  /**
+   * Minimum number of points necessary to form a cluster.
+   */
+  clusterMinPoints?: number,
+
+  /**
+   * An object defining custom properties on the generated clusters.
+   */
+  clusterProperties?: any,
+
+  /**
+   * Radius of each cluster when clustering point.
+   */
+  clusterRadius?: number,
+
+  /**
+   * The GeoJSON data representing the location.
+   */
+  data: { [key: string]: any },
+
+  /**
+   * GeoJSON layer fill style.
+   */
+  fillStyle?: { [key: string]: any },
+
+  /**
+   * If `true`, the map will fit the bounding box around the passed data.
+   */
+  fitBoundingBox?: boolean,
+
+  /**
+   * An ID value to apply to the layer.
+   */
+  layerId?: string,
+
+  /**
+   * GeoJSON layer point style.
+   */
+  pointStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer stroke style
+   */
+  strokeStyle?: { [key: string]: any }
+};
+
+const DEFAULT_BUFFER = 2;
+
+/**
+ * This component renders a location marker to be used in a Peripleo context.
+ */
+const LocationMarkers = (props: Props) => {
+  const map = useMap();
+
+  /**
+   * Sets the bounding box on the map.
+   */
+  useEffect(() => {
+    if (map && props.data && props.fitBoundingBox) {
+      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
+      map.fitBounds(boundingBox);
+    }
+  }, [map, props.buffer, props.data, props.fitBoundingBox]);
+
+  return (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+          id={props.layerId}
+        />
+      )}
+      <GeoJSONLayer
+        cluster={props.cluster}
+        clusterMaxZoom={props.clusterMaxZoom}
+        clusterMinPoints={props.clusterMinPoints}
+        clusterProperties={props.clusterProperties}
+        clusterRadius={props.clusterRadius}
+        data={props.data}
+        fillStyle={props.fillStyle}
+        id={props.layerId}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
+  );
+};
+
+LocationMarkers.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  fillStyle: MapStyles.fill,
+  fitBoundingBox: true,
+  pointStyle: MapStyles.point,
+  strokeStyle: MapStyles.stroke
+};
+
+export default LocationMarkers;

package/src/index.js

@@ -4,10 +4,11 @@
 export { default as DrawControl } from './components/DrawControl';
 export { default as GeoJsonLayer } from './components/GeoJsonLayer';
 export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarker } from './components/LocationMarker';
+export { default as LocationMarkers } from './components/LocationMarkers';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';
 
 // Utils
 export { default as Map } from './utils/Map';
+export { default as MapStyles } from './utils/MapStyles';

package/src/utils/MapStyles.js

@@ -1,6 +1,6 @@
 // @flow
 
-export const DEFAULT_POINT_STYLE = {
+const point = {
   type: 'circle',
   paint: {
     'circle-radius': [
@@ -21,7 +21,7 @@ export const DEFAULT_POINT_STYLE = {
   }
 };
 
-export const DEFAULT_FILL_STYLE = {
+const fill = {
   type: 'fill',
   paint: {
     'fill-color': '#ff623b',
@@ -29,10 +29,16 @@ export const DEFAULT_FILL_STYLE = {
   }
 };
 
-export const DEFAULT_STROKE_STYLE = {
+const stroke = {
   type: 'line',
   paint: {
     'line-color': '#ff623b',
     'line-opacity': 0.6
   }
 };
+
+export default {
+  point,
+  fill,
+  stroke
+};

package/types/components/GeoJsonLayer.js.flow

@@ -1,13 +1,11 @@
 // @flow
 
 import React, {
-  useCallback,
   useEffect,
-  useMemo,
   useState
 } from 'react';
 import { Layer, Source } from 'react-map-gl';
-import _ from 'underscore';
+import MapStyles from '../utils/MapStyles';
 
 type Props = {
   data?: { [key: string]: any },
@@ -17,69 +15,9 @@ type Props = {
   url?: string
 };
 
-const DEFAULT_COLOR = '#CC3333';
-const HIGHLIGHT_COLOR = '#990000';
-
-const DEFAULT_FILL_STYLES = {
-  'fill-color': DEFAULT_COLOR,
-  'fill-opacity': 0.2
-};
-
-const DEFAULT_LINE_STYLES = {
-  'line-color': HIGHLIGHT_COLOR,
-  'line-opacity': 0.6
-};
-
-const DEFAULT_POINT_STYLES = {
-  'circle-radius': [
-    'interpolate',
-    ['linear'],
-    ['number', ['get', 'point_count'], 1],
-    0, 4,
-    10, 14
-  ],
-  'circle-stroke-width': 1,
-  'circle-color': DEFAULT_COLOR,
-  'circle-stroke-color': HIGHLIGHT_COLOR
-};
-
 const GeoJsonLayer = (props: Props) => {
   const [data, setData] = useState(props.data);
 
-  /**
-   * Returns the layer style for the passed style and default.
-   *
-   * @type {function(*, *): *}
-   */
-  const getLayerStyles = useCallback((style, defaultStyle) => _.defaults(style, defaultStyle), []);
-
-  /**
-   * Sets the fill layer style.
-   *
-   * @type {*}
-   */
-  const fillStyle = useMemo(() => (
-    getLayerStyles(props.fillStyle, DEFAULT_FILL_STYLES)
-  ), [getLayerStyles, props.fillStyle]);
-
-  /**
-   * Sets the line layer style.
-   *
-   * @type {*}
-   */
-  const lineStyle = useMemo(() => (
-    getLayerStyles(props.lineStyle, DEFAULT_LINE_STYLES)
-  ), [getLayerStyles, props.lineStyle]);
-
-  /**
-   * Sets the point layer style.
-   *
-   * @type {*}
-   */
-  const pointStyle = useMemo(() => (
-    getLayerStyles(props.pointStyle, DEFAULT_POINT_STYLES)
-  ), [getLayerStyles, props.pointStyle]);
-
   /**
    * If the data is passed as a URL, fetches the passed URL and sets the response on the state.
    */
@@ -98,21 +36,27 @@ const GeoJsonLayer = (props: Props) => {
     >
       <Layer
         filter={['!=', '$type', 'Point']}
-        paint={fillStyle}
+        paint={props.fillStyle}
         type='fill'
       />
       <Layer
         filter={['!=', '$type', 'Point']}
-        paint={lineStyle}
+        paint={props.lineStyle}
         type='line'
       />
       <Layer
         filter={['==', '$type', 'Point']}
-        paint={pointStyle}
+        paint={props.pointStyle}
         type='circle'
       />
     </Source>
   );
 };
 
+GeoJsonLayer.defaultProps = {
+  fillStyle: MapStyles.fill,
+  pointStyle: MapStyles.point,
+  strokeStyle: MapStyles.stroke
+};
+
 export default GeoJsonLayer;

package/types/components/LocationMarker.js.flow

@@ -6,6 +6,11 @@ import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '.
 import MapUtils from '../utils/Map';
 
 type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
   /**
    * The number of miles to buffer the GeoJSON data.
    */
@@ -52,12 +57,12 @@ const LocationMarker = (props: Props) => {
 
   return (
     <>
-      <PulsingMarkerLayer
-        id='current'
-        data={props.data}
-      />
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
       <MixedGeoJSONLayer
-        id='current'
         data={props.data}
         fillStyle={props.fillStyle}
         strokeStyle={props.strokeStyle}

package/types/components/LocationMarkers.js.flow

@@ -0,0 +1,125 @@
+// @flow
+
+import { GeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect } from 'react';
+import MapStyles from '../utils/MapStyles';
+import MapUtils from '../utils/Map';
+
+type Props = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
+  /**
+   * The number of miles to buffer the GeoJSON data.
+   */
+  buffer: number,
+
+  /**
+   * If true, markers will be clustered before the specified zoom level.
+   */
+  cluster?: boolean,
+
+  /**
+   * Max zoom to cluster points on.
+   */
+  clusterMaxZoom?: number,
+
+  /**
+   * Minimum number of points necessary to form a cluster.
+   */
+  clusterMinPoints?: number,
+
+  /**
+   * An object defining custom properties on the generated clusters.
+   */
+  clusterProperties?: any,
+
+  /**
+   * Radius of each cluster when clustering point.
+   */
+  clusterRadius?: number,
+
+  /**
+   * The GeoJSON data representing the location.
+   */
+  data: { [key: string]: any },
+
+  /**
+   * GeoJSON layer fill style.
+   */
+  fillStyle?: { [key: string]: any },
+
+  /**
+   * If `true`, the map will fit the bounding box around the passed data.
+   */
+  fitBoundingBox?: boolean,
+
+  /**
+   * An ID value to apply to the layer.
+   */
+  layerId?: string,
+
+  /**
+   * GeoJSON layer point style.
+   */
+  pointStyle?: { [key: string]: any },
+
+  /**
+   * GeoJSON layer stroke style
+   */
+  strokeStyle?: { [key: string]: any }
+};
+
+const DEFAULT_BUFFER = 2;
+
+/**
+ * This component renders a location marker to be used in a Peripleo context.
+ */
+const LocationMarkers = (props: Props) => {
+  const map = useMap();
+
+  /**
+   * Sets the bounding box on the map.
+   */
+  useEffect(() => {
+    if (map && props.data && props.fitBoundingBox) {
+      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
+      map.fitBounds(boundingBox);
+    }
+  }, [map, props.buffer, props.data, props.fitBoundingBox]);
+
+  return (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+          id={props.layerId}
+        />
+      )}
+      <GeoJSONLayer
+        cluster={props.cluster}
+        clusterMaxZoom={props.clusterMaxZoom}
+        clusterMinPoints={props.clusterMinPoints}
+        clusterProperties={props.clusterProperties}
+        clusterRadius={props.clusterRadius}
+        data={props.data}
+        fillStyle={props.fillStyle}
+        id={props.layerId}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
+  );
+};
+
+LocationMarkers.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  fillStyle: MapStyles.fill,
+  fitBoundingBox: true,
+  pointStyle: MapStyles.point,
+  strokeStyle: MapStyles.stroke
+};
+
+export default LocationMarkers;

package/types/index.js.flow

@@ -4,10 +4,11 @@
 export { default as DrawControl } from './components/DrawControl';
 export { default as GeoJsonLayer } from './components/GeoJsonLayer';
 export { default as LayerMenu } from './components/LayerMenu';
-export { default as LocationMarker } from './components/LocationMarker';
+export { default as LocationMarkers } from './components/LocationMarkers';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';
 
 // Utils
 export { default as Map } from './utils/Map';
+export { default as MapStyles } from './utils/MapStyles';

package/types/utils/MapStyles.js.flow

@@ -1,6 +1,6 @@
 // @flow
 
-export const DEFAULT_POINT_STYLE = {
+const point = {
   type: 'circle',
   paint: {
     'circle-radius': [
@@ -21,7 +21,7 @@ export const DEFAULT_POINT_STYLE = {
   }
 };
 
-export const DEFAULT_FILL_STYLE = {
+const fill = {
   type: 'fill',
   paint: {
     'fill-color': '#ff623b',
@@ -29,10 +29,16 @@ export const DEFAULT_FILL_STYLE = {
   }
 };
 
-export const DEFAULT_STROKE_STYLE = {
+const stroke = {
   type: 'line',
   paint: {
     'line-color': '#ff623b',
     'line-opacity': 0.6
   }
 };
+
+export default {
+  point,
+  fill,
+  stroke
+};

package/src/components/LocationMarker.js

@@ -1,77 +0,0 @@
-// @flow
-
-import { MixedGeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
-import React, { useEffect } from 'react';
-import { DEFAULT_FILL_STYLE, DEFAULT_POINT_STYLE, DEFAULT_STROKE_STYLE } from '../utils/MapStyles';
-import MapUtils from '../utils/Map';
-
-type Props = {
-  /**
-   * The number of miles to buffer the GeoJSON data.
-   */
-  buffer: number,
-
-  /**
-   * The GeoJSON data representing the location.
-   */
-  data: { [key: string]: any },
-
-  /**
-   * GeoJSON layer fill style.
-   */
-  fillStyle?: { [key: string]: any },
-
-  /**
-   * GeoJSON layer point style.
-   */
-  pointStyle?: { [key: string]: any },
-
-  /**
-   * GeoJSON layer stroke style
-   */
-  strokeStyle?: { [key: string]: any }
-};
-
-const DEFAULT_BUFFER = 2;
-
-/**
- * This component renders a location marker to be used in a Peripleo context.
- */
-const LocationMarker = (props: Props) => {
-  const map = useMap();
-
-  /**
-   * Sets the bounding box on the map.
-   */
-  useEffect(() => {
-    if (map && props.data) {
-      const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
-      map.fitBounds(boundingBox);
-    }
-  }, [map, props.buffer, props.data]);
-
-  return (
-    <>
-      <PulsingMarkerLayer
-        id='current'
-        data={props.data}
-      />
-      <MixedGeoJSONLayer
-        id='current'
-        data={props.data}
-        fillStyle={props.fillStyle}
-        strokeStyle={props.strokeStyle}
-        pointStyle={props.pointStyle}
-      />
-    </>
-  );
-};
-
-LocationMarker.defaultProps = {
-  buffer: DEFAULT_BUFFER,
-  fillStyle: DEFAULT_FILL_STYLE,
-  pointStyle: DEFAULT_POINT_STYLE,
-  strokeStyle: DEFAULT_STROKE_STYLE
-};
-
-export default LocationMarker;