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 => (
+
+
+
+ ),
+ 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);
};