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]