Elevation Along a Path

20 Feb

In my last post, I showed you how to get the elevation at any point in Albuquerque. In this post, we are going to improve the application and get an elevation profile of the City. I have put the code on JsBin for you to play with and test out.

The Application

The application will allow the user to draw a line and will then draw a chart showing the elevation at the endpoints of each line segment. The results will look like the image below. ElevationLine In the image above, you will see the green line I have drawn and a chart above the map. The chart shows the elevation profile. Notice how the elevation dips at the river and rises significantly as we approach the Sandia Mountains.

Required Plugins

To make the application work, you will need to use the Leaflet.Draw plugin. This is what lets the user draw the line. We only want the user to draw a line, so I will modify the sample config code on github to:

var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ draw: { marker: false, position: ‘topleft’, polygon: false, polyline: { metric: false, shapeOptions:{color:’green’,opacity:1} }, circle:false, rectangle: false }, edit: { featureGroup: drawnItems, edit: false } }); map.addControl(drawControl); map.on(‘draw:created’, function (e) { var type = e.layerType, layer = e.layer; if (type === ‘polyline’) { CODE GOES HERE } drawnItems.addLayer(layer);

This will only give the option for drawing a line. We will add our code in the if statement that equals polyline. You will also need to reference Charts.js. I really like Charts.js for static charts and Smoothie charts for streaming data.

The Completed Logic

We are going to allow the user to draw a line. When they are done, we need the points for each segment. Once we have the points, we will buffer them and get the elevation just as we did in the last post.

drawLine=layer.getLatLngs(); for(var x=0;x<drawLine.length;x++){ a=L.marker([drawLine[x].lat,drawLine[x].lng]); 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)+’}’; howhigh(g); }

We calla function howhigh(g) and pass the geometry. This function is the AJAX call.

var d=JSON.parse(http.responseText); points.push(d.features[0].attributes.ELEV); l.push(label); label=label+1; drawChart();

The AJAX call pushes the elevation to an array and increments the label variable. It then calls drawChart(). We will update the chart as each result comes in from the AJAX calls.

function drawChart(){ data={ labels: l, datasets: [ { label: “$”, fillColor: “rgba(151,187,205,0.5)”, strokeColor: “rgba(151,187,205,0.8)”, highlightFill: “rgba(151,187,205,0.75)”, highlightStroke: “rgba(151,187,205,1)”, data: points }]}; var ctx = document.getElementById(“data”).getContext(“2d”); myBarChart = new Chart(ctx).Bar(data, {scaleShowGridLines : true,responsive:false,showTooltips:false,scaleBeginAtZero : false,barValueSpacing : .5}); }

The function configures the data and labels and adds the chart to the canvas.

To Do

The application only allows you to draw a single line. In the future, the application needs a reset function to clear the data and chart and allow the user to draw a new line.


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: