@performant-software/geospatial 2.1.0-beta.10 → 2.1.0-beta.11

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

@@ -2,7 +2,7 @@
 
 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 MapStyles from '../utils/MapStyles';
 import MapUtils from '../utils/Map';
 
 type Props = {
@@ -80,9 +80,9 @@ const LocationMarkers = (props: Props) => {
 
 LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
-  fillStyle: DEFAULT_FILL_STYLE,
-  pointStyle: DEFAULT_POINT_STYLE,
-  strokeStyle: DEFAULT_STROKE_STYLE
+  fillStyle: MapStyles.fill,
+  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/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

@@ -2,7 +2,7 @@
 
 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 MapStyles from '../utils/MapStyles';
 import MapUtils from '../utils/Map';
 
 type Props = {
@@ -80,9 +80,9 @@ const LocationMarkers = (props: Props) => {
 
 LocationMarkers.defaultProps = {
   buffer: DEFAULT_BUFFER,
-  fillStyle: DEFAULT_FILL_STYLE,
-  pointStyle: DEFAULT_POINT_STYLE,
-  strokeStyle: DEFAULT_STROKE_STYLE
+  fillStyle: MapStyles.fill,
+  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/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
+};