Client side geodesic buffers





Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014


Client side geodesic buffers

Posted on .

Far and away, the most common type of spatial data on the web is point data. Do I have anything to back that up? No. But I don’t think many would argue. And when we have point data, we usually want to know about things that are within a certain distance. Tobler!

In GIS-speak, this means buffering a point and then selecting other points/features within said buffer. Once you have a buffer, it’s easy to test whether or not a point is inside it. This post is going to talk about building a buffer client side.

The Esri JavaScript API provides an easy way to draw circles via the draw tools but doesn’t not provide a similar, stream-lined way to build a geodesic circle from a point. Here’s some code a co-worker came up with to build an accurate geodesic circle client side:

// one mile in meters
var rMeters = 1609.344;  // buffer distance
// hack to generate a geodesic buffer on the client side using Polygon.createCircle().
// Only applicable for large scale maps (city scale).
// compute pixel resolution on the sphere with current map width
// generate a know line at a specific distance at the current latitude
var mapWidthPolyline = new Polyline(map.spatialReference);
mapWidthPolyline.addPath([[map.extent.xmin,evt.mapPoint.y],[map.extent.xmax , evt.mapPoint.y]]);
var mapWidthGeodesic = geodesicUtils.geodesicLengths(
var mapResolutionGeodesic = mapWidthGeodesic / map.width;
var geodesicRadius = rMeters / mapResolutionGeodesic;
var circleGeometry = Polygon.createCircle({
  center: evt.screenPoint,
  map: map,
  numberOfPoints: 60,
  r: geodesicRadius

Why go to this trouble? Since we map people work in a world of constant distortion, building a circle on a plane is an inaccurate way to create a circle. When using large-scale web mercator maps, planar circles will result in an area that does not accurately represent the desired distance from a point. Here’s a full page using the code above to buffer a point as well as planar and geodesic buffers from a geometry service. That page shows our client side buffer as well as both geodesic and planar buffers created using a geometry service. Not only is the client-side (red) buffer consistently faster to draw than the geometry service version, it’s effectively identical to the geodesic version (shown in blue).


Author Buford

Posted at 6:23 am June 28, 2014.

C’est bizarre je pensais justement √©crire un article
identique à celui ci


Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (1) ...