So we're going to be making a connection to the Wiki Mapei API and just using the example key, so there's
a number of examples within the documentation that you can select where they've got the endpoints.
And also they have some example and points and paths here that you can connect to to make the queries
and return back data.
So data can be returned back as JSON.
There's quite a lot of information coming back from the GSM connection.
And then what we're doing in this lesson is updating the input fields.
Providing ability to search within those coordinates and then returning back the five results from those
coordinates with the title and a link to more information.
So if the coordinates change, the results are also going to change.
So in this case, we're not able to find anything.
Let's change it to three.
So we're able to find one item at these coordinates, so that's longitude and latitude.
So as the user updates those, it's going to update the results that are coming back from the API.
And we did apply a little bit of styling with see us.
So we're going to be connecting to an API at Wicky, a map here.
And that's going to be the website where we're going to be connecting to.
So set up the index file with each HTML opening the Tamil Tigers.
We've got some space here for stylings of would want to apply some styling to the content that we're
outputting and then we just have the standard HTML tags here.
So we've got an H1 to indicate a title and then we've got also an input area.
So if we need to input some content, we can use that element a button, a div to output the content
and then linking to the gas.
Well, so the JavaScript file and that's where all the magic is going to happen within the JavaScript
file.
I've kept some of the setup variables that we did in the last lesson where we selected the elements
from the page.
We updated some of the values of those elements on the page and then also add an event listener with
the button click.
So this is going to be a similar format where whenever the button gets clicked, then we're going to
be connecting to the API.
So there's a lot of useful APIs out there.
And when you do do do a Google search, you'll also notice that there are quite a bit of various APIs
that you can connect to.
So one of them that we're going to be demonstrating today is going to be the Wiki mapping API.
So if you and for this one as well, I just did want to note that in order to get a key, you do have
to sign up with them.
So this is an optional thing.
If you're not interested in signing up, then you can just skip this lesson.
And I did want to note that within this video, we are going to be using just the example key and that
appears to be working at the time of filming this video.
So it may or may not be working when you are looking at it.
So this, again, is an optional lesson.
And this is just going to be a demonstration of the various APIs out there that you should or that you
can check out and that you do need to sign up for it and how you can make use of various websites with
the endpoints.
So going over to the Whicker Mapping API, they've got information about how to connect to the API.
So I did set up a key already, sort of generated a key.
So I'm ready to start using the API.
They've got the required parameters here.
So there's always going to be an endpoint that we're connecting to.
And in this case, it does require a key within the base URL and that's the one that we're generating.
And then we just add in the key value here and then the object that we want to get information about.
So all of this and they've got an example here of how to connect.
So we'll do the first or we'll just do the example and select this endpoint.
So let's go back into the coding area and copy the euro.
And I'm going to add that in as a variable name for it.
You URL and then we'll manipulate it afterwards.
So right now it does have example key in there and a toggle the word wrap.
So let's just go back into the JavaScript and refresh.
And when we click the button, nothing's happening.
And this is where we can make our load so that our futch request to the euro and then we've got the
promises.
And returning back the JSON object.
And taking that Jason and returning it back as Jason and actually I won't call this Jason, I'm going
to just call it the response object.
So the response that comes back and then sending it back as Jason and then when we get the data back,
we're going to take the data and put it into the console and we'll try this out.
And we don't necessarily know if the endpoint is receiving back, Jason.
And remember, we are using the example key.
So let's see what happens.
And we can also add in the catch as well.
So if there are any issues, then we can catch the error and let's output the error message into the
console as well.
So run the code and we get this interesting message that we haven't seen before where we get unexpected
token and then less insight.
And Jason at position zero.
So generally what this means is that this isn't properly structured, Jason, data.
So we're trying to force it into JSON as we were expecting, Jason.
But in this case, it's not going to be structured.
Jason, data.
So let's see what happened.
And now when I just return it back as text, this is what we get back.
We get an XML return value.
So this is XML object with a bunch of text on the page.
So how about we take this content and we output it into the output area so we take output in our HTML
and we'll equal this to whatever the contents of data is.
So let's see what gets returned back here.
So it looks like we got quite a bit of information being returned back here.
And again, this isn't structured JSON data, so we need to check in to see if we can force the format
so there is an option to force the format to be JSON format, and that's the one that we're after.
And all of these APIs are going to be different.
So keep in mind that they're going to have different documentation.
And usually the first place to start is to go to the documentation just to see what type of documentation
and how you can do the response value.
So in this case, they do have an option here for format equals and then let's set that format as JSON.
So we'll add and then format it as Jason and we'll see what then gets returned back.
So this is a JSON formatted structure that just got returned back.
And now because it is, Jason, this going to be a whole lot easier for us to read and to deal with.
So let's also put it into the console.
And then what we'll do, instead of outputting the data, we're going to pass it and stratify it and
output the data that way, because now that it's going to be a JSON data, it's going to be a JavaScript
object and then we can pass through it.
So using JSON String Afie that string, if I had the data that were outputting into output, so try
that another time and at this point you can use the console to output the JavaScript content.
As an object.
And it's returning back the content of Idy fifty five, so what if we want to search and we don't want
to get it by it, but we want to search the content.
So let's go back into the API.
So you can get their place by area, you can get the place by it, you can get the nearest place so
to latitude and longitude.
And there's also a police search, so in this format, we can do a function, police search, so let's
update the string and function and we're going to do a police search.
So make sure that we're writing it out properly.
And this case, we're not going to need an I.D., but we are going to need a query for what we're searching
for.
So let's search for the word tower.
And these are the required parameters in this documentation, so we can search for the police, search
with the required parameters and let's load that and see what we get back.
So invalid coordinates.
So let's try another end point and we'll try the one here where we've got the example of places get
nearest.
So it's going to return back the nearest places to this latitude and longitude, and then we'll create
an input where we can update the latitude and longitude.
So it's going to return back places to the nearest latitude longitude.
Make sure you keep the format, Jason, so that we return the data back within adjacent format.
And now let's try it.
And that was copy and paste issue there, so let's again refresh that and try that.
So it is returning back the five places that are nearest and then this is the places array that we could
loop through and output the content.
So let's make a few updates to the page.
We're beside the input, so the first input can be the latitude and you can change these with the various
parameters, so there's the latitude and longitude and those are the parameters that are changing.
And it looks like we're still working off of the example keys.
So you could continue as you practice to work on, for example, key if it is working.
And if not, then you might have to sign up for a key in order to be able to access the API.
So creating another input.
And we'll do this with JavaScript Saval, too, and using the documents.
And that's going to be to create elements, sort of creating a separate input and this input vowel to
is going to be let's set an attribute and the type is going to be.
Text.
And then the input vowel to.
Value and we're just going to accept these as the default latitudes and longitudes, so the first one
will have this as the default and this one will have this as the default latitude.
So this one is going to be longitude and this one is going to be the latitude.
So now we're going to have to input fields and let's add that to that page.
So adding it in and we'll use the document body, so just append it to the body.
And add the input file to.
And sort of appends let's do a prepend.
And what also we can do is select the one.
And will hide the H1.
Or we can prepend it, so that will shift it up above that, the inputs there.
So I will just move it around on the page.
So that way we've got first we've got the longitude and then we've got the latitude and we've got the
option to load.
Search, Bob.
So the search map, longitude, latitude, so now we're able to update these parameters to get the nearest
and we need to have these dynamically updated.
So let's within the Futch request.
We'll create a temporary URL and that you URL is going to attend to the existing one with these parameters
and a lot of times in the query string, it doesn't matter what order.
So we're going to just shift the order around here.
So we're going to have the euro and then concatenate to the URL, the latitude and longitude.
And now these numbers.
I use the template, literals the tactics.
And use the euro route and concatenate and.
So we want to pick up the latitude and longitude numbers, so for longitude, we're going to get the
input value value of whatever it currently is and for latitude where we're going to get the input value
of the first input field.
So whatever that current value is, and that way we can use those to create our Web URL.
And then just update the string variable.
And also, good idea to lock it out into the console so that you can see the you are what it looks like.
So that's the world that we're running and it looks like.
And the reason is that we're still using the euro.
So it's not getting a proper structure because we're still we're not updating and we're not trying to
connect to the temporary URL.
That's why I always put it out into the console, because that way, if I want to check and make sure
that I've got a working Web URL, I can simply click the euro out into the console and see if that's
going to be opening up.
So copy the link.
And paste it into the console and just see what's getting returned back.
So this look like it's proper, Jason.
And it's properly taking and returning the content back.
Let's see if we update this, if that changes and I'm not sure but coordinates.
And it looks like at these coordinates, we're not actually finding anything.
So a little bit of trial and error here, and if we go back to where that original location was.
I can see that it's changed.
So now we can output some of this content and iterate through it and put it on the page now that we're
getting the data coming in.
So let's do that as well.
And I'll just call it maker.
And then from here is where we can iterate through and we can loop through the data object.
So mainly just the places that we're going to be iterating through and then outputting that within HTML.
And looping through Satake data.
And go for each one of the items within the data, we're selecting the elements and let's log it out
into the console.
And just run this function here.
So we'll see what we're returning back and we're not able to loop through because we're trying to loop
through the full data object and we want to loop through the data places.
So we have an option here where if we want, we can just send over the data places.
So make sure that it's always there that you're trying to loop through and again, use the console as
needed.
So it looks like we've got a number of items here that we can output so we can do a title.
You, Earl.
There's also the polygon as well.
And let's see what type of content we can use.
So this is going back to the search that wasn't working.
So in this case, it does require the query as well as the latitude and longitude for the search parameters.
And if you go to examples on the wiki map here, you can select and let's search by.
The coordinates get nearest.
And those are the default coordinates, so send a request.
And we want to talk about it with Jason.
And for this, you do need to have a key that you've added.
So this is just for demonstration purposes where you can connect to the API examples.
And a lot of them will have these examples and points that you can check out and see the results that
you returning back your EPIK to try it out within their trial.
So let's go back to the documentation and then using the data that we see within the console, let's
output some of this content.
So we do have a title.
So create some elements and using the documents, eight elements.
Create a diff and this is going to be the title, so the text content of title.
It's going to be equal to the elements and again, referring to the object for the property name so
I can use dot notation in this case.
And then Output's append title.
So there's all the titles being output, we can also have a hyperlink.
So instead of doing a title, I just create a div container just to save a little bit of time.
So this is just optional how you want to approach this and how you want to output the content.
So in this case, if I do that in our HTML, we can add all of the structure within the entire HTML.
And that's going to save us some JavaScript for creating the elements.
And wrap it in a dif.
So let's comment about the inner turmoil that we're putting here.
And I'll just consider the Jason results, so that way we're only seeing the actual results that we
want to look at, we can link to.
You, Earl tml, so it saves us some time on putting some of the content because we can just simply
put up with it.
There you are, all e-mail.
So it's going to add your URL HTML for us.
So it already structured the HTML for us, saved us a little bit of time there.
And from here, you can update and add content as needed.
And that one.
You get rid of the paragraph and I'll just separate it as as an H.R., so you've got separation.
And we can click the links to find out more information about that particular object.
And let's add some styling.
So border.
And round it slightly.
And with some party.
And center, it's the with of 80 percent for it.
And let's add a hover option to it.
And the obesity.
And for d'Hiv, using class list.
Add and add the class of box to the elements.
So it's a little bit more structure to the elements on the page, and we don't need to h rough H.R.
a horizontal rule and also let's do a margin at the bottom.
So do top and bottom of 10 pics for Marjan.
So it gives us the ability to connect output some useful information from another Web API.
With a different data structure.
The task for this lesson is to find a web endpoint so you can use the same word that I use the wiki
Mapei dot org and connect to the API and retrieve the data as JSON data.
So a lot of them might have an example and look for ones that have a format in JSON, review the data
and create JavaScript object from the data.
So if it is Jason formatted, then you can within the first request you can structured as JSON object
or JavaScript object and then use the data on your Web page.
And then lastly, create a way for the user to update the results dynamically from your webpage making
queries to the API so that you're getting dynamic results being returned back to the user.