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

package/src/components/{LocationMarker.js → LocationMarkers.js}

@@ -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.
    */
@@ -37,7 +42,7 @@ const DEFAULT_BUFFER = 2;
 /**
  * This component renders a location marker to be used in a Peripleo context.
  */
-const LocationMarker = (props: Props) => {
+const LocationMarkers = (props: Props) => {
   const map = useMap();
 
   /**
@@ -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}
@@ -67,11 +72,11 @@ const LocationMarker = (props: Props) => {
   );
 };
 
-LocationMarker.defaultProps = {
+LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
   fillStyle: DEFAULT_FILL_STYLE,
   pointStyle: DEFAULT_POINT_STYLE,
   strokeStyle: DEFAULT_STROKE_STYLE
 };
 
-export default LocationMarker;
+export default LocationMarkers;

package/src/index.js

@@ -4,7 +4,7 @@
 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';

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,82 @@
+// @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 = {
+  /**
+   * If `true`, the point marker will display with a pulsing animation.
+   */
+  animate?: boolean,
+
+  /**
+   * 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 LocationMarkers = (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 (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
+      <MixedGeoJSONLayer
+        data={props.data}
+        fillStyle={props.fillStyle}
+        strokeStyle={props.strokeStyle}
+        pointStyle={props.pointStyle}
+      />
+    </>
+  );
+};
+
+LocationMarkers.defaultProps = {
+  buffer: DEFAULT_BUFFER,
+  fillStyle: DEFAULT_FILL_STYLE,
+  pointStyle: DEFAULT_POINT_STYLE,
+  strokeStyle: DEFAULT_STROKE_STYLE
+};
+
+export default LocationMarkers;

package/types/index.js.flow

@@ -4,7 +4,7 @@
 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';