In this video as promised you're going to learn how to use another HDTV API in our weather application.
The API.
We're gonna be using a provides a geo coding service geo coding is the process of taking an address
like Philadelphia United States and converting that into a latitude and longitude coordinate pair.
And that's a great thing because once we have those coordinates we'll be able to pass them off to the
dark sky API to get the weather information for that location.
So in the end of the day it's going to require two HDTV requests to build out the weather app.
We're gonna chain both together doing one first then the other.
So down below that's going to look a bit like this.
The user obviously is going to provide an address.
Then we will use an API which we'll explore in this video to convert that to the lat and long.
Then we'll use the coordinate pair with the dark sky API up above to get the weather so the user puts
the address in and gets the weather out.
At no point do they need to know we converted things to latitude and longitude behind the scenes like
we did with the dark sky API.
Let's go ahead and move into the browser to explore this service before we try to integrate it into
our project.
So I'm gonna close down some of these tabs like the dark sky API ones since we already have that integrated
and I'm going to crack open a brand new tab and go over to map a box dot com map box offers all sorts
of interesting location based services.
In this case we're gonna use their geo coding service.
Now if we head over to the pricing page we will see this is very similarly structured to the dark sky
API.
We can get started for free without providing a credit card or any other information and we get 50000
requests a month which is way more than we'll end up using.
Now once again we do have to create an account.
So Matt box can provide us with a secret key like we had for dark sky.
That's going to allow it to track how many requests we're actually making.
So I'm going to go to the Getting Started page and we're just going to sign up for an account and once
we have one we can integrate what we know about geo coding into the weather app.
Let's go ahead and create the account so I'm going to pick a user name then I'll provide my email address
as well as pick a password for the account and everything else is completely optional.
You don't need to provide your name or your company information then we're going to click a getting
started and this is going to bring us over to the map box dashboard from here.
The first thing we want to do is head over to the access tokens tab up top.
This is going to bring us to our access token and this is what we're gonna need to provide with our
request.
So in that box knows we're actually authenticated and it can associate the request with our account
now up above it talks about why we would need an access token.
And it links to map box Web services.
These are all of the HDTV requests you can make with the map box tool set and we're going to crack open
that link in a brand new tab.
This is Andrew from the future with a quick update as you'll notice the API docs you're seeing are different
from the API docs I'm seeing in the video map box reorganized their API docs changing the layout.
Now the new docs are indeed better but they're different which means it was impossible to follow along
with the old video.
So what I'm doing here is refilling the next five or so minutes where we explore how we'll be using
Matt box.
Once we're done with that we'll get back into the regular video the actual end points and what data
we get back.
That hasn't changed at all.
It's just the API docs that have been redesigned and reorganized.
So let's get to it.
Here are the new API docs and this should be similar to what you're seeing now there are a lot of different
features documented here.
What we're looking for is in the sidebar under search service if we click on that.
This brings us over to their geo coding service.
That's what's going to allow us to take addresses like this one and convert them into coordinate pairs
once we've converted the address into the coordinate pair we can pass the latitude and longitude off
to Dark Sky to actually fetch the weather we can see right here that this API supports two different
types of geo coding.
We have a forward geo coding and reverse geo coding we want forward geo coding that's when we provide
an address and get back the latitude and longitude and reverse geo coding just does the opposite in
this case though we have the address we want the coordinate pair.
So we'll use forward geo coding.
Now if we scroll down onto this page we get to the End Points section and if we keep going past that
eventually we get to forward geo coding.
And this is the end point we're going to be using we'll provide our address.
We'll get back the latitude and longitude.
Now down below we can see there are two required parameters.
One is the end point we're gonna use map box dot places.
This is the main one.
The other one is reserved for enterprise customers.
And we also have these search text.
This is where we provide the address down below the required parameters.
We can see there are a bunch of optional ones which also allow us to customize that operation and we'll
explore a couple of these in just a few minutes.
If we keep scrolling down though the next thing we run into is example request with forward geo coding.
Now right here they're just using the curl command from the terminal to fetch the given end point.
But let's examine the end point and then we'll see what data we get back.
So it starts off with the base U.R.L. That is h TTP s API map box dot com.
Then we have this portion of the U.R.L. right here.
We are using their geo coding API it is Version 5.
Then we provide those two required parameters.
As mentioned we have map box dot places and then we have our search term right here.
The example request is searching for Los Angeles.
So what we get back would be the coordinate pair for that location.
Next up we have a bunch of other information we have dot Jason.
So we're gonna get Jason data back.
And here we start the query string.
Now we have key value pairs inside of here.
And by default there is only one it is access token.
This is where we provide the API token for our account and we can see that it's already set up in the
U.R.L. right here.
And it runs on quite a bit.
So what we're going to do is take this U.R.L. bring it over to the browser and explore the response
data.
Once we're comfortable with it we'll customize it with a few of those optional parameters and then we'll
actually integrate this into our project code.
So right here let's take the entire U.R.L. without those double quotes.
I'm going to copy it to the clipboard and once I have it we're just going to crack open a new browser
tab and visit that you are all when we do.
What do we get.
As expected we get a Jason response.
Let's explore the Jason response and to start I'm going to collapse the expanded properties query and
features.
And right here we can see that the root of our response is just an object with four properties type
query features and attribution.
Now query just lets us know what we provided.
So right here we have these search terms that we provided via the U.R.L. up above.
It is the features array that contains the interesting data we want to extract.
Now you'll notice it's an array five items.
So by default that box is going to return the five most relevant search results for your search term
and the most relevant one comes first.
So Los Angeles in California is not the only Los Angeles out there.
It happens to be the first result since it's the most relevant.
But there are other cities with the same name.
So let's dive into the features array and see exactly what we got right here.
The first object in the features array is what we're going to focus on.
It starts up above and it ends way down here.
And this is the most relevant search result for our keywords right here we can see there are a lot of
properties one that's interesting is place name.
Los Angeles California United States.
So right here this is something we can display to the user so they know exactly where they're getting
the weather for and if they see this and it's not the Los Angeles they expected they can always change
their search term to target a different city with the same name.
Now aside from place name we also need the latitude and longitude and those are available via the center
property.
It is an array with two numbers inside the first number that is the longitude and the second number.
That is the latitude.
So we're going to be able to extract these two values from the Jason response and pass those off to
the dark sky API to fetch the weather for this location before we go any further.
Let's head back over to the API docs and explore some of the optional parameters.
So right here we have a nice list of optional ones one that might be of interest to us is language.
Language allows us to customize the language that's being used in the response.
So right here if I was creating an application specifically for German users or specifically for French
users I could customize the response with language to get things back in their native tongue.
Now down below language we have other options as well.
One being limit limit allows us to specify the maximum number of results we can return.
Now by default it's five.
We've seen that.
And the maximum supported is 10.
In our case we know that we're only ever going to use the first result.
That's what we're going to fetch.
The weather for.
So we can actually set the limit to one requiring less data to be sent back.
Speeding up the request.
So let's get that done.
We're going to use limit in our U.R.L. over here.
Now that you are l already sets up our query string it starts with the question mark and we provide
our first key value pair.
The key is access token then it's equals followed by this really long value at the end of that token.
We're going to set up a another key value pair for the query string.
We use the ampersand followed by the key that is limit followed by equals.
Then the value and right here we'll just limit it to one search result.
Let me bring that back up just so you can see it there is exactly what we're using now in this case.
If I refresh the page I can see that the features array is still an array.
It's just an array of one item.
So right here we have the most relevant result.
Once again it is Los Angeles in California.
If someone wanted to target a different Los Angeles they could add more content to the search term to
be more specific.
Now that we have this in place let's continue on with the regular programming as we're done exploring
the changes made to the API documentation.
Thanks for bearing with me.
Let's get to it now.
Let's talk about what I'd like you to do as your challenge for the video.
The goal for now is to not worry about integrating the two requests together we'll get to that shortly.
The goal for the moment is to just create a completely separate request.
Getting this you are well integrated into our application.
So right here what you do is not going to tie in with what we have above in any way whatsoever.
And that is the point.
For now the goal is to print the latitude and longitude for Los Angeles which is indeed the search term
we've used in the you are all we have in the browser.
So step one you're going to fire off a new request to the U.R.L. we explored in the browser and you're
going to have the request module pass it as Jason like we did above.
From there you're going to print both the latitude and longitude to the terminal and you're going to
use the two values on the center array for that.
The first being the latitude and the second being the longitude.
Then finally you're going to test your work.
Run this file.
Make sure you see the weather print from up above and make sure you see your lat and long coordinate
pair printing down below.
Once again there's no need to communicate between these two requests at all for now.
The goal is to have a completely separate request.
Just getting the geo coding service set up in our application in some way.
Take as much time as you need to knock that one out pause the video and when you're done come back and
click play
how'd that go down below.
I'm going to kick things off by first getting that you are well into my application code.
So over here we're gonna grab the U.R.L. exactly as we had it in the browser without making any changes
whatsoever.
And I'm going to store it in a new variable cost.
Now you are L is already taken.
So I'll use something like geo coding or geo code.
You are all perfect now that we have that variable set up we can paste the you are L right inside of
my single quotes right inside of the string and down below.
We're going to fire off our request.
So right here what do we do.
We call a request exactly like we did up above and we pass in those two important pieces of information
to the options object.
The first is the U.R.L..
Now we have that stored in our new geo code.
You are all variable.
And the second is the Jason in lower case property which we're going to set to true.
So the data gets passed automatically for us now and from here we can go ahead and move on and do the
function that's gonna run when we get our response back.
We know this function gets called with two arguments The first argument is the error which is not something
we've explored yet but something we will explore shortly.
And the other argument that is the response on response we can find the data we need.
Now this brings us to step 3.
We want to print the latitude and longitude to the terminal and we know we have both of those sitting
right here.
So we have to navigate through this data structure to get to those two values and we're gonna do that
in our function to start I'm going to create two variables to extract those two values.
Now this was not an essential piece to the challenge maybe you just went right into a console dialogue
call.
That would have worked just fine.
Right here though I'll start by creating a const and I'll call this 1 latitude.
I'm gonna set it equal to.
And we know we want to go to response dot body which is this object the one we've used before with the
dark sky API.
Now from there we want to access features.
So response dot body dot features.
That's an array of just one item.
We're going to grab that first one by index using bracket notation and then from there we want to access
what's on center.
So dot center now center is also an array.
The first one being the latitude so I'll grab that end.
There we go.
Now we have the latitude stored in a variable.
Let's go ahead and set up a another variable for the long etude
this variable is going to get its value from a similar place response dot body dot features accessing
the first item then dot center.
This is the second item with an index of 1.
Andrew from the future with one more quick interruption.
Once again I did reverse the order.
So up above you can see the code I just typed which is incorrect.
Down below we have the correct version of the latitude comes from the second item in that array with
the index of one and the longitude comes from the first item in that array with the index of 0.
I do address this in the video in a couple of lectures when I finally realized my mistake now we can
go ahead and actually print both of those values to the console so console log.
I will print latitude first then a comma to pass in a second argument to print long to tube.
Once again if your console got log call looks different.
Is okay.
The goal is to just get that information.
Printing it doesn't matter the exact format it's printed in for now.
The last thing to do was to test our work making sure this request and our code inside of the function
actually works as expected.
I'm going to go ahead and rerun the file.
This is gonna show both things it's going to show the lat and long as well as the weather.
And right here we have our data I have minus 1 1 8 which is exactly what I have over here and I have
34 which also matches up with the values I'm seeing in the center array.
Now that we have this in place we are all done with the challenge and we can remove those challenge
comments.
And now we have to API requests in our program.
The first the one we just created that allows us to convert an address into the lat long coordinate
pair.
And the second allows us to take the lat long and convert that into a weather forecast.
So the user gives us an address and they get back the weather for that location.
Now there's a lot more to say about various things related to asynchronous programming and HDTV requests.
So we're gonna continue on with all of this.
In the next video I'll see you that.