@performant-software/geospatial 2.1.0-beta.9 → 2.1.1-beta.0

package/src/components/GeoJsonLayer.js

@@ -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/src/components/LocationMarkers.js

@@ -1,8 +1,9 @@
 // @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 { GeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect, useMemo } from 'react';
+import _ from 'underscore';
+import MapStyles from '../utils/MapStyles';
 import MapUtils from '../utils/Map';
 
 type Props = {
@@ -11,11 +12,47 @@ type Props = {
    */
   animate?: boolean,
 
+  /**
+   * (Optional) data to pass to the fitToBounds function.
+   */
+  boundingBoxData?: any,
+
+  /**
+   * (Optional) options to pass to the fitToBounds function.
+   * See [spec](https://maplibre.org/maplibre-gl-js/docs/API/types/FitBoundsOptions/).
+   */
+  boundingBoxOptions?: any,
+
   /**
    * 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.
    */
@@ -26,6 +63,11 @@ type Props = {
    */
   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.
    */
@@ -50,24 +92,41 @@ const DEFAULT_BUFFER = 2;
 const LocationMarkers = (props: Props) => {
   const map = useMap();
 
+  /**
+   * Memo-izes the data prop.
+   *
+   * @type {{[p: string]: *}}
+   */
+  const data = useMemo(() => (_.isEmpty(props.data) ? null : props.data), [props.data]);
+
   /**
    * Sets the bounding box on the map.
    */
   useEffect(() => {
-    if (map && props.data) {
+    if (map && data && props.fitBoundingBox) {
       const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
-      map.fitBounds(boundingBox);
+      map.fitBounds(boundingBox, props.boundingBoxOptions, props.boundingBoxData);
     }
-  }, [map, props.buffer, props.data]);
+  }, [map, props.buffer, props.data, props.boundingBoxData, props.boundingBoxOptions, props.fitBoundingBox]);
+
+  if (!data) {
+    return null;
+  }
 
   return (
     <>
       { props.animate && (
         <PulsingMarkerLayer
           data={props.data}
+          id={props.layerId}
         />
       )}
-      <MixedGeoJSONLayer
+      <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}
@@ -80,9 +139,10 @@ const LocationMarkers = (props: Props) => {
 
 LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
-  fillStyle: DEFAULT_FILL_STYLE,
-  pointStyle: DEFAULT_POINT_STYLE,
-  strokeStyle: DEFAULT_STROKE_STYLE
+  fillStyle: MapStyles.fill,
+  fitBoundingBox: true,
+  pointStyle: MapStyles.point,
+  strokeStyle: MapStyles.stroke
 };
 
 export default LocationMarkers;

package/src/index.js

@@ -11,3 +11,4 @@ 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/Map.js

@@ -2,6 +2,11 @@
 
 import { bbox, bboxPolygon, buffer } from '@turf/turf';
 
+const MIN_LATITUDE = -90;
+const MAX_LATITUDE = 90;
+const MIN_LONGITUDE = -180;
+const MAX_LONGITUDE = 180;
+
 /**
  * Returns a bounding box for the passed geometry (with optional buffer).
  *
@@ -30,6 +35,29 @@ const getBoundingBox = (geometry, bufferDistance = null) => {
   return bbox(polygonBuffer);
 };
 
+/**
+ * Returns true if the passed coordinates are valid.
+ *
+ * @param coordinates
+ *
+ * @returns {boolean}
+ */
+const validateCoordinates = (coordinates) => {
+  let valid = false;
+
+  if (coordinates) {
+    const [latitude, longitude] = coordinates;
+
+    valid = latitude >= MIN_LATITUDE
+      && latitude <= MAX_LATITUDE
+      && longitude >= MIN_LONGITUDE
+      && longitude <= MAX_LONGITUDE;
+  }
+
+  return valid;
+};
+
 export default {
-  getBoundingBox
+  getBoundingBox,
+  validateCoordinates
 };

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/LocationMarkers.js.flow

@@ -1,8 +1,9 @@
 // @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 { GeoJSONLayer, PulsingMarkerLayer, useMap } from '@peripleo/maplibre';
+import React, { useEffect, useMemo } from 'react';
+import _ from 'underscore';
+import MapStyles from '../utils/MapStyles';
 import MapUtils from '../utils/Map';
 
 type Props = {
@@ -11,11 +12,47 @@ type Props = {
    */
   animate?: boolean,
 
+  /**
+   * (Optional) data to pass to the fitToBounds function.
+   */
+  boundingBoxData?: any,
+
+  /**
+   * (Optional) options to pass to the fitToBounds function.
+   * See [spec](https://maplibre.org/maplibre-gl-js/docs/API/types/FitBoundsOptions/).
+   */
+  boundingBoxOptions?: any,
+
   /**
    * 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.
    */
@@ -26,6 +63,11 @@ type Props = {
    */
   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.
    */
@@ -50,24 +92,41 @@ const DEFAULT_BUFFER = 2;
 const LocationMarkers = (props: Props) => {
   const map = useMap();
 
+  /**
+   * Memo-izes the data prop.
+   *
+   * @type {{[p: string]: *}}
+   */
+  const data = useMemo(() => (_.isEmpty(props.data) ? null : props.data), [props.data]);
+
   /**
    * Sets the bounding box on the map.
    */
   useEffect(() => {
-    if (map && props.data) {
+    if (map && data && props.fitBoundingBox) {
       const boundingBox = MapUtils.getBoundingBox(props.data, props.buffer);
-      map.fitBounds(boundingBox);
+      map.fitBounds(boundingBox, props.boundingBoxOptions, props.boundingBoxData);
     }
-  }, [map, props.buffer, props.data]);
+  }, [map, props.buffer, props.data, props.boundingBoxData, props.boundingBoxOptions, props.fitBoundingBox]);
+
+  if (!data) {
+    return null;
+  }
 
   return (
     <>
       { props.animate && (
         <PulsingMarkerLayer
           data={props.data}
+          id={props.layerId}
         />
       )}
-      <MixedGeoJSONLayer
+      <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}
@@ -80,9 +139,10 @@ const LocationMarkers = (props: Props) => {
 
 LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
-  fillStyle: DEFAULT_FILL_STYLE,
-  pointStyle: DEFAULT_POINT_STYLE,
-  strokeStyle: DEFAULT_STROKE_STYLE
+  fillStyle: MapStyles.fill,
+  fitBoundingBox: true,
+  pointStyle: MapStyles.point,
+  strokeStyle: MapStyles.stroke
 };
 
 export default LocationMarkers;

package/types/index.js.flow

@@ -11,3 +11,4 @@ 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/Map.js.flow

@@ -2,6 +2,11 @@
 
 import { bbox, bboxPolygon, buffer } from '@turf/turf';
 
+const MIN_LATITUDE = -90;
+const MAX_LATITUDE = 90;
+const MIN_LONGITUDE = -180;
+const MAX_LONGITUDE = 180;
+
 /**
  * Returns a bounding box for the passed geometry (with optional buffer).
  *
@@ -30,6 +35,29 @@ const getBoundingBox = (geometry, bufferDistance = null) => {
   return bbox(polygonBuffer);
 };
 
+/**
+ * Returns true if the passed coordinates are valid.
+ *
+ * @param coordinates
+ *
+ * @returns {boolean}
+ */
+const validateCoordinates = (coordinates) => {
+  let valid = false;
+
+  if (coordinates) {
+    const [latitude, longitude] = coordinates;
+
+    valid = latitude >= MIN_LATITUDE
+      && latitude <= MAX_LATITUDE
+      && longitude >= MIN_LONGITUDE
+      && longitude <= MAX_LONGITUDE;
+  }
+
+  return valid;
+};
+
 export default {
-  getBoundingBox
+  getBoundingBox,
+  validateCoordinates
 };

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
+};