Name: 1.5 用Leaflet.js映射地理位置--在JavaScript中使用數據和API。 (1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript)
Uploaded: 2021-01-14T10:18:00.000Z
Duration: 15 min 22 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

I'm back and ready to continue this International Space

We've got the data from the Where the ISS.at API.

I'm able to also retrieve the latitude and longitude

and update to DOM span elements on the web page with that data.

Now, I want to plot the point of latitude and longitude

And to do that, I'm going to use Leaflet.js.

I always like when there's a Quick Start Guide.

So one thing that's interesting about Leaflet

I did this with Chart.js, but Leaflet also

includes a CSS file, cascading style sheet file.

This is a file that has lots of styling information for the map

I'm going to put it into my code in the header.

Maybe there's a place it's supposed to go.

but this needs to go after Leaflet's CSS.

which is right here on the page itself, is I need a div.

So I can do this without copy pasting because I

I'll say div id equals, and I'll call it ISS map end div.

I said I could do this without copy pasting.

But there's another important piece here,

which is that I need to make sure that the div has

the map won't appear because it will assume the height is zero.

I can't cover everything in this video series

If you're unfamiliar with CSS, I will point you

to some resources in this video's description of where

But this CSS is a way to define styling information

So this is styles for the map ID, which I'm calling ISS map.

I'm going to add in the header a style tag.

But I'm actually going to call this ISS map.

So now, I have both loaded the Leaflet.js library.

I have defined a div element where the map will go.

And I have given it a little bit of styling information so

And I have a feeling if I go back to the Quick Start

Guide, which is right here, it's going to say,

And I'm going to place it right here after--

actually, let's do this right at the beginning.

But let me just explain to you what these things are.

And those are the settings for what the map should

I'm feeling we're going to run into an error.

There it is, sort of, kind of, not really.

字幕列表影片播放

1.5 用Leaflet.js映射地理位置--在JavaScript中使用數據和API。 (1.5 Mapping Geolocation with Leaflet.js - Working with Data and APIs in JavaScript)

stuff

grab

stretch

tricky