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

package/types/components/LocationMarker.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 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 (
+    <>
+      { props.animate && (
+        <PulsingMarkerLayer
+          data={props.data}
+        />
+      )}
+      <MixedGeoJSONLayer
+        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;

package/types/components/MapDraw.js.flow

@@ -109,7 +109,7 @@ const DEFAULT_ZOOM_DELAY = 1000;
 const GeometryTypes = {
   geometryCollection: 'GeometryCollection',
   point: 'Point',
-  polygon: 'Polygon'
+  polygon: ['Polygon', 'MultiPolygon']
 };
 
 /**
@@ -138,7 +138,7 @@ const MapDraw = (props: Props) => {
     const { geometry: { type } } = detail;
 
     return (props.geocoding === 'point' && type === GeometryTypes.point)
-      || (props.geocoding === 'polygon' && type === GeometryTypes.polygon);
+      || (props.geocoding === 'polygon' && GeometryTypes.polygon.includes(type));
   }, [props.geocoding]);
 
   /**
@@ -162,7 +162,9 @@ const MapDraw = (props: Props) => {
       onChange();
 
       // Call the onGeocoding selection callback
-      props.onGeocodingSelection(detail);
+      if (props.onGeocodingSelection) {
+        props.onGeocodingSelection(detail);
+      }
     }
   }, [isValid, onChange, props.onGeocodingSelection]);
 
@@ -237,6 +239,7 @@ const MapDraw = (props: Props) => {
           onSelection={onSelection}
           showFullGeometry={props.geocoding === 'polygon'}
           showResultMarkers={false}
+          key={props.geocoding}
         />
       )}
       { props.navigation && (