From f40136394081c4b69f1ea15d7b97513156fdce96 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 8 Feb 2018 10:31:23 +0200
Subject: [PATCH] Improve the coordinate obfuscation

- Use a proper algorithm to offset correctly in different latitudes
- Only configure the offset in meters, infer circle radius from that
---
 src/components/Map/Map.example.js             | 18 +++++++++++++++++
 src/components/Map/Map.js                     |  2 +-
 src/components/SearchMap/SearchMap.js         |  5 +----
 src/config.js                                 | 11 +++++-----
 .../__snapshots__/SearchPage.test.js.snap     |  3 +--
 src/util/maps.js                              | 20 ++++++++++++++++---
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/Map/Map.example.js b/src/components/Map/Map.example.js
index 1a6e7684..82c155e5 100644
--- a/src/components/Map/Map.example.js
+++ b/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,
+    },
+  },
+};
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index 0dfe43f9..449d426e 100644
--- a/src/components/Map/Map.js
+++ b/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,
   };
 
diff --git a/src/components/SearchMap/SearchMap.js b/src/components/SearchMap/SearchMap.js
index 0e862672..e9cedce1 100644
--- a/src/components/SearchMap/SearchMap.js
+++ b/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,
   }),
 };
 
diff --git a/src/config.js b/src/config.js
index 663d9596..e3861bc2 100644
--- a/src/config.js
+++ b/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.
   //
diff --git a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap b/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
index 14f11b5d..2facea5e 100644
--- a/src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap
+++ b/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,
             }
diff --git a/src/util/maps.js b/src/util/maps.js
index abff5bcc..c2060230 100644
--- a/src/util/maps.js
+++ b/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);
 };