Welcome to Advanced GIS, Lecture 6

This is a web page that can be viewed as slides.

→ to move forward

← to go back

Advanced GIS

Class 6

Brooke

Ana

project proposals

a {
    color: blue;
    font-size: 20px;
}

<p style="font-size: 100px;">
    a special paragraph
</p>

workflow

(1) try out a change in developer tools, then copy and paste it to your file

workflow

(2) comment things out rather than delete them

workflow

(2) comment things out rather than delete them:

a {
    /* Trying out a new color */
    /*color: blue;*/
    color: rgb(88, 18, 209);
    ...
}

JavaScript

source

JavaScript (often JS)

JavaScript helps you make web pages interactive

source

in a way, JavaScript lets you use verbs on your web page

move this element

change this part of the map

update when the person using the site clicks something

embedding a Carto map

<iframe width="100%" height="520" frameborder="0"
src="https://thenewschool.carto.com/u/brelsfoeagain/
builder/fd0fea4a-ee46-11e6-8c31-0ecd1babdde5/embed"
allowfullscreen webkitallowfullscreen mozallowfullscreen
oallowfullscreen msallowfullscreen></iframe>

source

take a minute to compare an embedded map to one using JavaScript

what are the similarities and differences between the two?

now take a few minutes to compare the code for an embedded map to one using JavaScript

what do you recognize?

let's change some settings on a JavaScript map

in-class exercise, part 1

let's change the basemap on a JavaScript map

in-class exercise, part 2

3 steps:

1: load Carto and Leaflet

libraries

libraries are bundles of code that you can load onto your page

libraries are often open source and free

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://libs.cartocdn.com/carto.js/v4.2.0/carto.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://libs.cartocdn.com/carto.js/v4.2.0/carto.min.js"></script>

(you'll copy and paste this)

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://libs.cartocdn.com/carto.js/v4.2.0/carto.min.js"></script>

loading JavaScript and CSS files happens in the HTML `head`

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://libs.cartocdn.com/carto.js/v4.2.0/carto.min.js"></script>

any JavaScript or CSS from a library should go before your JavaScript or CSS

what's Leaflet?

source

a free and straightforward webmapping library

source

one way to make webmaps

source

we can use Leaflet and put data from Carto on a map

source

Leaflet is completely independent of Carto

source

2: make a place for the map to go

<body>
    <div id="map"></div>
</body>

and use CSS to give the map a width and height

#map {
  height: 100vh;
  width: 100%;
}

3: create the map and tell Carto to put data on it

source

let's javascript a map!

in-class exercise, part 3

OK but that seems like a lot of effort to embed a map from Carto

true

but there's more!

more customization

source

custom legends

source

videos in popups

source

feature data outside of the popup, such as in sidebars

source

make your own filtering interfaces

source

+ more fun stuff we'll get to

load Carto library
make a place for the map to go
tell Carto to create the map

source

JavaScript has almost nothing to do with Java

this isn't always easy

I will provide templates for you to work from

I recommend working through some introductory JavaScript lessons

don't try to learn it all at once!

for next week, I'd like you to get to know variables, arrays, and objects

khan academy

Codecademy

Eloquent JavaScript

lynda JavaScript Essential Training

javascripting

Advanced GIS

project proposals

workflow

workflow

workflow

workflow

JavaScript

JavaScript (often JS)

JavaScript helps you make web pages interactive

in a way, JavaScript lets you use verbs on your web page

move this element

change this part of the map

update when the person using the site clicks something

embedding a Carto map

take a minute to compare an embedded map to one using JavaScript

what are the similarities and differences between the two?

now take a few minutes to compare the code for an embedded map to one using JavaScript

what do you recognize?

let's change some settings on a JavaScript map

in-class exercise, part 1

let's change the basemap on a JavaScript map

in-class exercise, part 2

3 steps:

1: load Carto and Leaflet

libraries

libraries are bundles of code that you can load onto your page

libraries are often open source and free

(you'll copy and paste this)

loading JavaScript and CSS files happens in the HTML head

any JavaScript or CSS from a library should go before your JavaScript or CSS

what's Leaflet?

a free and straightforward webmapping library

one way to make webmaps

we can use Leaflet and put data from Carto on a map

Leaflet is completely independent of Carto

2: make a place for the map to go

and use CSS to give the map a width and height

3: create the map and tell Carto to put data on it

let's javascript a map!

in-class exercise, part 3

OK but that seems like a lot of effort to embed a map from Carto

true

but there's more!

more customization

custom legends

videos in popups

feature data outside of the popup, such as in sidebars

make your own filtering interfaces

+ more fun stuff we'll get to

JavaScript has almost nothing to do with Java

this isn't always easy

I will provide templates for you to work from

I recommend working through some introductory JavaScript lessons

don't try to learn it all at once!

for next week, I'd like you to get to know variables, arrays, and objects

loading JavaScript and CSS files happens in the HTML `head`