So far, we've looked at how to reach out and make
a request using the fetch function to an external API
with a particular URL path, grab the data in JSON format,
pull out a piece of that data we want,
and then use it for a particular reason.
And in this case, the data that I'm getting
is the latitude and longitude of the International Space
Station.
And I'm plotting it on a map using the Leaflet.js library.
So the one key feature-- there's a couple of different features
here that I didn't implement.
But one really key feature that I did not implement
is having that latitude and longitude refresh automatically
without me having to reload the page.
Now, it is important that I remind myself that the rate
limits of this API specify that I cannot make the request more
than once per second.
So I should limit my refresh rate of the application itself
to, at a minimum, that.
And this is something that you have to be conscientious about.
In this case, it's just an example.
It's just an experiment.
You don't have to worry too much about it.
But as you build applications that
get used by more and more people,
the rate at which you're requesting data from API
can become a fundamental thing.
It could, at a certain point, cost you a lot of money
to make a certain amount of requests.
So you have to be thoughtful about how often you're
doing that.
But even before that, I think what I would like to see happen
is, the map, when it first loads,
to have the space station oriented
in the center with a bit more zoom.
So let's see if we can at least fix that.
So I'm going to go back to the code.
And here, once I get the data from the International Space
Station, this is where I update the marker's location.
I should be able to also update the maps location.
And how do you do that?
Well, it's the setView function.
You might remember from the last video,
I tried to use setView with the marker.
So when you are specifying the location of a marker,
that's set lat long.
When you are specifying the location of the map itself,
that is setView.
And I would give it a latitude and longitude, and also then
some zoom level.
Let's just try like 5.
I don't know what's going to be a reasonable.
And there we go.
Apparently it's over open water right now,
so we're not seeing anything super interesting.
But let's set that back down to 2.
And we can see, there it is.
It's right there in the middle of the Atlantic Ocean right
now.
Great.
Now we're ready for the final step here.
I want to get the new latitude and longitude every so often.
And the way that I'm going to do that
is with the setInterval function.
So there is a function in JavaScript called setInterval.
And what setInterval does is, is it
says, hey, take this function, maybe your function called
getISS, and have it happen every so often, like every 1,000
milliseconds.
So in this sense, I could just call
getISS, which does all this.
I want it to happen right when the page loads,
because setInterval will actually wait a second
for the first time it calls it.
So I'm going to leave this redundant one in here.
GetISS, and then every one second, do that again.
Let's see what happens.
Wow, that was like one line of code.
There's a whole video for just one line of code?
We'll see if we run into any issues here
and have to do a bit more.
getISS is not defined.
Oops.
The Ss are capitalized.
JavaScript, as you might know, is case sensitive.
Don't forget that.
I always forget that.
So we can see this number is changing every so often.
Is this moving?
Oh, wait.
Ah, it keeps fixing my zoom.
So here's the thing.
Even though I wanted to set the maps location here initially,
its view initially to this, I only
want to set the view the first time.
So how do I want to deal with this?
Well, there's a variety of ways I can do this.
But I think one way I could do is just use a Boolean flag
variable.
So I can say something like, first time is true.
And I can say right here, if it's the first time, then set
the view.
And after you do that, set first time equal to false.
So this would be, whenever getISS is called,
it's going to set that view to the latitude
and longitude with that zoom.
Then set first time to false so the next time it comes around,
that will never happen again.
Maybe not the most elegant solution,
but one that will work.
Is it moving?
Can we see it's moving?
Ah, yeah, there it moved.
I think we're going to have to get a bit more zoom in here
to really see it moving.
There we go.
Now we can see the International Space Station, every one
second, is moving along the map.
There's some small cleanup things
we could do that might be nice for me to show you here just
to kind of polish this project off a little bit more.
One is, my web page is showing me
quite a bit of decimal places for the latitude and longitude.
That seems a little bit unnecessary.
I can use the JavaScript function toFixed,
which will fix what it is adding to only two decimal places.
So that's a nice little cleanup piece here.
I could also add the degree.
I might as well add the degree character here to see that.
Right after the span, I could put the degree character
right here.
And I go back to the page.
And whoops, I didn't hit save.
Where is it?
Oh, I put it in the span.
That's very important.
It'll get replaced if it's in the span.
It has to be outside.
And there we go.
So I have the degrees there.
That's kind of nice.
There
Are so many things we could add to this.
And a nice reference might be to go back
and look at the wheretheiss.at website and see.
For example, what if I also grab the altitude, and then
I made the size of the icon somehow tied to the altitude?
What if I added some more UI elements
so I could toggle things on and off?
Maybe actually I could keep the view always centered
around the ISS and have the map move behind it,
and the ISS would stay in place instead of it
moving along the map.
Again, I could use the p5 library
to do my own custom drawing, perhaps even on the path
or draw a velocity vector of how the map is moving.
In this video's description, when you go over
to the GitHub repository for the code in this example,
I'll also include the code for a variety of these solutions
and variations that you're seeing right now.
So thanks for watching this project.
We have done a lot in this first module
of working with data and APIs in JavaScript.
We've learned about the fetch function.
We know how to get different kinds of data
with the fetch function-- image, text, JSON data.
We know how to get JSON data from an external API.
We've looked at using some other JavaScript libraries,
like Chart.js and Leaflet.js.
For charting and mapping.
But we're missing a big, huge piece.
What if I want to save some data and use it later?
What if I want to authenticate with an API,
but hide my API keys?
There are so many things that I might
want to do that need more than just an index.html
file, with some JavaScript in it, some HTML in it,
maybe some CSS in it.
A lot of things that I'm going to want to do,
that I'm going to show you how to do,
involve writing your own server.
I'm going to show you how to use node.js, a JavaScript
runtime, another way of writing JavaScript outside
of the context of the browser, to write
server-side applications and do a variety of kinds of things
working with data, manipulating data, saving
data, communicating with APIs, that you couldn't
do so easily with just JavaScript in the browser.
And the two projects that I'm going
to build in the next set of videos,
they're products by Joey K. Lee.
Thank you so much for Joey for preparing these materials
and allowing me to use them in this video series.
The first one is going to capture images from your webcam
and save them to a database.
So you're going to learn about how to save data to a database,
and also how to do something more
with the fetch function, which is post data to the server.
Right now, we've been using fetch just to retrieve data.
We can also send data with a POST request.
And the third project, also by Joey Lee,
this project is crazy.
I'm going to use two different APIs at the same time, one
for getting weather information, one for getting air quality
information.
And what's going to be different and interesting
about that project is, it's going to require authentication
and hiding private API keys on the server itself.
We're going to look at how to do that
so that you can publish and open source your code,
but also keep your API keys hidden.
So thanks for watching.
You've now completed the first module
in working with data and APIs.
And we're on to module 2 in the next video.
[MUSIC PLAYING]