Tonight was an exciting night. This is the night I found out about both Turf.js and Mapbox.js. How I am going to be able to sleep is beyond me.
In an effort to pass on an expedient journey through a the sites I ran through to get my feet way I am creating a rapid post for you (just for you).
First of all we want to setup a Mapbox account so the we earn ourselves an access token, which we’ll use in our Mapbox.js script.
Sign up @ https://www.mapbox.com/
The sign up process after selecting “Try it for free” is pretty straight forward. If you get lost, please let me know where and I’ll come find you.
Once you are into you’re account I want you to click on the project button just to the left of you beautiful avatar. This is the page where your access token lives.
The next order you need to follow is going out to this site... https://www.mapbox.com/mapbox.js/example/v1.0.0/ and clicking on the Example button.
Once on the Example page you can copy the lovely sample code on that page and paste it into you text editor of choice. Yes, you can play with the example in JS Fiddle, but we want to make this local!
Remember that access token I told you about... Ugh, okay. Back on the project tab of you new Mapbox account is an access token which I snapped a censored picture of earlier. I want you to take that code and paste it into the code in you text editor.
The section you’ll be modifying looks like...
Once that’s open we can see a slick map rendering in our browser. At this point your local machine is making a call to the Mapbox server for the appropriate tiles. No BFD. I mean BFD!
To get this map you’ll need to spin up a local server, which you can do a couple different ways.
1. http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/
2. https://www.npmjs.com/package/http-server
Once all that is straightened away we can throw Turf.js into the mix.
Visit this site (https://www.mapbox.com/guides/intro-to-turf/) and insert the script tag into the <head></head> of the HTML you picked up earlier from the Mapbox.js site.
Once the script tag is in you have a Turf object and all of its wonderful methods and properties at your disposal.
We are going to sample the line-distance method. To do this we need to add a line to measure the distance of declare a couple variables along the way.
From the Turf.js site I want you to insert the geoJSON data below into the script tag in the body of your HTML file...
var dc = { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-77.031669, 38.878605], [-77.029609, 38.881946], [-77.020339, 38.884084], [-77.025661, 38.885821], [-77.021884, 38.889563], [-77.019824, 38.892368] ] }
We will also need create a length variable to store out the result of our line-distance...
var length = turf.lineDistance(dc, 'miles');
Now refresh your beautiful webpage and run... simple type length into the console.
Congratulations! You just got your first taste of both the Mapbox.js and Turf.js libraries.