Albuquerque Elevation using Turf.js

19 Feb

The City of Albuquerque publishes contour data at two foot intervals. This is really cool, but unfortunately, to load it in a map, you would need to manually page the results(paging will be introduced in ArcServer 10.3) because the service only returns 1,000 features and there are 706,840 features- that would require almost 3/4 of a million queries. even if you could display that many results, your map would probably get pretty slow. So how can we use this data? In this post, I will show you how to create an elevation service that will allow you to get an approximate elevation at any point in the city.

The Application

The application will query the contour service at the City of Albuquerque to get back an answer. The contour service contains lines, and to query it we will use a point (the user click). This means we need our point to hit the line – which would take a real stroke of luck on our part. To work around the intersection problem, we will use Turf.js to buffer the point and pass the geometry to the service. Now we have the intersection of a polygon with a line – a much easier query. The finished application is shown below.

Elevation at a point in Albuquerque

Elevation at a point in Albuquerque

The Logic

We need to allow the user to click on the map and create a buffer. We can do this by combining Leaflet.js with Turf.js.

map.on(“click”,function(e){

a=L.marker(e.latlng);
var b=a.toGeoJSON();
var buffered = turf.buffer(b,0.01,”miles”);
var result = turf.featurecollection(buffered.features.concat(b));
var g='{“rings”:’+JSON.stringify(buffered.features[0].geometry.coordinates)+’}’;

Now we have a buffer we can pass to the ESRI REST API in our variable g. We make the call to the endpoint using our standard AJAX call.

var url=”http://coagisweb.cabq.gov/arcgis/rest/services/public/contours/MapServer/0/query”;
var params=”f=json&outSR=4326&outFields=*&geometryType=esriGeometryPolygon&spatialRel=esriSpatialRelIntersects&inSR=4326&geometry=”+g;
var http = new XMLHttpRequest();
http.open(“POST”, url, true);
http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
var d=JSON.parse(http.responseText);
a.bindPopup(“<h3>”+d.features[0].attributes.ELEV+”</h3>”).addTo(map)
a.openPopup();
}}
http.send(params);

We add a marker to the map on the location of the user click and then bind a popup to it passing the elevation.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: