Obfuscate SearchMap listing coordinates

src/components/SearchMap/SearchMap.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { arrayOf, bool, func, number, string, object } from 'prop-types';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import classNames from 'classnames';
 import { groupBy, isEqual, reduce } from 'lodash';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { propTypes } from '../../util/types';
+import { obfuscatedCoordinates } from '../../util/maps';
 import { googleBoundsToSDKBounds } from '../../util/googleMaps';
 import { SearchMapInfoCard, SearchMapPriceLabel, SearchMapGroupLabel } from '../../components';
+import config from '../../config';
 
 import css from './SearchMap.css';
 
@@ -67,6 +69,20 @@ const reducedToArray = mapListings => {
   return reduce(mapListings, (acc, listing) => acc.concat([listing]), []);
 };
 
+const withCoordinatesObfuscated = listings => {
+  return listings.map(listing => {
+    const { attributes, ...rest } = listing;
+    const attrs = {
+      ...attributes,
+      geolocation: obfuscatedCoordinates(attributes.geolocation),
+    };
+    return {
+      ...rest,
+      attributes: attrs,
+    };
+  });
+};
+
 /**
  * MapWithGoogleMap uses withGoogleMap HOC.
  * It handles some of the google map initialization states.
@@ -214,15 +230,20 @@ export class SearchMapComponent extends Component {
       rootClassName,
       center,
       isOpenOnModal,
-      listings,
+      listings: originalListings,
       mapRootClassName,
       onCloseAsModal,
       onIdle,
       zoom,
+      coordinatesConfig,
     } = this.props;
     const classes = classNames(rootClassName || css.root, className);
     const mapClasses = mapRootClassName || css.mapRoot;
 
+    const listings = coordinatesConfig.fuzzy
+      ? withCoordinatesObfuscated(originalListings)
+      : originalListings;
+
     // container element listens clicks so that opened SearchMapInfoCard can be closed
     /* eslint-disable jsx-a11y/no-static-element-interactions */
     return (
@@ -261,10 +282,9 @@ SearchMapComponent.defaultProps = {
   rootClassName: null,
   useLocationSearchBounds: true,
   zoom: 11,
+  coordinatesConfig: config.coordinates,
 };
 
-const { arrayOf, bool, func, number, string } = PropTypes;
-
 SearchMapComponent.propTypes = {
   bounds: propTypes.latlngBounds,
   center: propTypes.latlng,
@@ -277,6 +297,7 @@ SearchMapComponent.propTypes = {
   rootClassName: string,
   useLocationSearchBounds: bool, // eslint-disable-line react/no-unused-prop-types
   zoom: number,
+  coordinatesConfig: object,
 };
 
 const SearchMap = SearchMapComponent;

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -115,6 +115,19 @@ exports[`SearchPageComponent matches snapshot 1`] = `
             }
           }
           className={null}
+          coordinatesConfig={
+            Object {
+              "circleOptions": Object {
+                "fillColor": "#c0392b",
+                "fillOpacity": 0.2,
+                "strokeColor": "#c0392b",
+                "strokeWeight": 0.5,
+              },
+              "circleRadius": 500,
+              "fuzzy": true,
+              "fuzzyDefaultZoomLevel": 14,
+            }
+          }
           isOpenOnModal={false}
           listings={Array []}
           mapRootClassName={null}

src/util/maps.js

@@ -12,10 +12,8 @@ const { LatLng } = sdkTypes;
  */
 export const obfuscatedCoordinates = latlng => {
   const { lat, lng } = latlng;
-
-  // TODO: improve this
-  const newLat = lat + random(-0.001, 0.001);
-  const newLng = lng + random(-0.001, 0.001);
-
+  const threshold = 0.01;
+  const newLat = lat + random(-1 * threshold, threshold);
+  const newLng = lng + random(-1 * threshold, threshold);
   return new LatLng(newLat, newLng);
 };