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

Andrea
La Rainne

project proposals

a {
    color: blue;
    font-size: 20px;
}
<p style="font-size: 100px;">
    a special paragraph
</p>

workflow

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
source
source

JavaScript (often JS)

JavaScript helps you make web pages interactive

source
source
source
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
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.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/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.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/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.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/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.6.0/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.6.0/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
source
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

make your own filtering interfaces

source
source

+ more fun stuff we'll get to

  1. load Carto library
  2. make a place for the map to go
  3. 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