Merge pull request #696 from sharetribe/coord-obfuscation-improvements

Improve the coordinate obfuscation

src/components/Map/Map.example.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Map from './Map';
 import { types as sdkTypes } from '../../util/sdkLoader';
+import { obfuscatedCoordinates } from '../../util/maps';
 import config from '../../config';
 
 const { LatLng } = sdkTypes;
@@ -36,3 +37,20 @@ export const WithObfuscatedLocation = {
     },
   },
 };
+
+export const WithCircleLocation = {
+  component: props => (
+    <div style={{ height: 400 }}>
+      <Map {...props} />
+    </div>
+  ),
+  props: {
+    center: new LatLng(60.16502999999999, 24.940064399999983),
+    obfuscatedCenter: obfuscatedCoordinates(new LatLng(60.16502999999999, 24.940064399999983)),
+    address: 'Sharetribe',
+    coordinatesConfig: {
+      ...config.coordinates,
+      fuzzy: true,
+    },
+  },
+};

src/components/Map/Map.js

@@ -29,7 +29,7 @@ const MapWithGoogleMap = withGoogleMap(props => {
 
   const circleProps = {
     options: coordinatesConfig.circleOptions,
-    radius: coordinatesConfig.circleRadius,
+    radius: coordinatesConfig.coordinateOffset,
     center,
   };
 

src/components/SearchMap/SearchMap.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { arrayOf, bool, func, number, string, object, shape } from 'prop-types';
+import { arrayOf, bool, func, number, string, shape } from 'prop-types';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import classNames from 'classnames';
 import { groupBy, isEqual, reduce } from 'lodash';
@@ -300,9 +300,6 @@ SearchMapComponent.propTypes = {
   zoom: number,
   coordinatesConfig: shape({
     fuzzy: bool.isRequired,
-    fuzzyDefaultZoomLevel: number.isRequired,
-    circleRadius: number.isRequired,
-    circleOptions: object.isRequired,
   }),
 };
 

src/config.js

@@ -253,12 +253,11 @@ const coordinates = {
   //
   // https://gis.stackexchange.com/a/8674
 
-  // Amount of maximum offset that is applied to obfuscate the
-  // original coordinates.
-  coordinateOffset: 0.004, // 0.001 is roughly 111m
-
-  // The circle radius in meters.
-  circleRadius: 500,
+  // Amount of maximum offset in meters that is applied to obfuscate
+  // the original coordinates. The actual value is random, but the
+  // obfuscated coordinates are withing a circle that has the same
+  // radius as the offset.
+  coordinateOffset: 500,
 
   // Options to style the circle appearance.
   //

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

@@ -162,8 +162,7 @@ exports[`SearchPageComponent matches snapshot 1`] = `
                 "strokeColor": "#c0392b",
                 "strokeWeight": 0.5,
               },
-              "circleRadius": 500,
-              "coordinateOffset": 0.004,
+              "coordinateOffset": 500,
               "fuzzy": false,
               "fuzzyDefaultZoomLevel": 14,
             }

src/util/maps.js

@@ -1,4 +1,4 @@
-import { random, memoize, round } from 'lodash';
+import { memoize } from 'lodash';
 import { types as sdkTypes } from './sdkLoader';
 import config from '../config';
 
@@ -7,8 +7,22 @@ const { LatLng } = sdkTypes;
 const obfuscatedCoordinatesImpl = latlng => {
   const { lat, lng } = latlng;
   const offset = config.coordinates.coordinateOffset;
-  const newLat = round(lat + random(-1 * offset, offset), 5);
-  const newLng = round(lng + random(-1 * offset, offset), 5);
+
+  // https://gis.stackexchange.com/questions/25877/generating-random-locations-nearby
+  const r = offset / 111300;
+  const y0 = lat;
+  const x0 = lng;
+  const u = Math.random();
+  const v = Math.random();
+  const w = r * Math.sqrt(u);
+  const t = 2 * Math.PI * v;
+  const x = w * Math.cos(t);
+  const y1 = w * Math.sin(t);
+  const x1 = x / Math.cos(y0);
+
+  const newLat = y0 + y1;
+  const newLng = x0 + x1;
+
   return new LatLng(newLat, newLng);
 };