This visualization shows distances of a point to the main transport rings and references in Moscow. You can explore what is at exactly the same distance from those locations by clicking on the map.
It looks quite easy to solve, but as the matter of fact it's not so straight-forward)). Turf suggests, that you can build isolines, or buffers, just by putting correct distances into JSTS Topology lib and off you go. It may be correct for distances like 200m, but try and build those buffers around different features, putting the correct distances to the nearest points of those features. After a couple of attempts and reprojecting the features to meters you will maybe end up with something like that:
Rings do not intersect at given point as they should! WHY?!. Exactly, they don't, cause your projection is discrete, that means that you simply cannot perform geometrical operations like offsetting in it, distances will alway be wrong.
What you need is equidistantial(distance-preserving) projection, like this one. You also have to change the origin of the projection to the centroid of the feature you are trying to shrink/offset.
let centroid = [33, 55]; // center of your feature
const EARTH_RADIUS = 6378137; // you want to keep the meter precision
let projection = d3.geo.azimuthalEquidistant()
.rotate([-33, -55])
.scale(EARTH_RADIUS);With this one you can achieve your goal.
Have fun!
- "Как близко вы от Кремля?" Afisha Daily, 02.2016