Welcome to Advanced GIS, Lecture 2

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

→ to move forward

← to go back

Advanced GIS

Taking On the Gulf Oil Spill With Kites and Cameras

“My favorite part about this project is that it really does make more sense to fly a kite with a camera on it than to try to take pictures of where you are all the way from space. You’re literally holding the camera thousands of feet in the air with a string — it’s a very visceral experience.”

Taking On the Gulf Oil Spill With Kites and Cameras

Bakken Pipeline Map

source

Emily

Graydon

Next week: final project thoughts

tell me about:

Something you would like to work on as your final project.

Past work you're excited about that might be a good interactive map.

Projects that you might like to emulate.

Thoughts about webmaps—what inspires you about them?

Map-related skills that you would like to acquire.

We will talk about these briefly next week.

Carto

source

github.com/CartoDB/cartodb

carto.com/pricing

Who uses Carto?

Mapping the Historical Biodiversity of the Solomon Islands...

Raptor Tracker

Carto can make every part of your web map if you want it to

Or you can do all of this on your own and ask Carto to just host our data

Both approaches can be useful

We'll start with letting Carto do everything for us

datasets

where you import, edit, and analyze your data

you can upload:

csv
shapefiles (zipped)
kml
geojson
(and some others)

maps

where you make public map views of your datasets

categorized

graduated

let's talk about making features look different based on the zoom level

or "zoom-dependent styles"

this will take some code...

CartoCSS

you don't need to memorize any of this

cartocss reference

watch the video

use the documentation

(open source)

why?

you can share it

(it's just text)

source

it will give us more control over our map data

CartoCSS

Looks similar to but is otherwise completely separate from CSS.

CartoCSS

Looks similar to but is otherwise completely separate from CSS.

CSS adds style (font styles, color) to webpages, CartoCSS does the same for maps.

mrstaticvoid on flickr

niklasstjerna on flickr

#layer {
    marker-fill: #ff307a;
    marker-line-color: #FFF;
    marker-line-width: 0.25;
    marker-line-opacity: 0.4;
    marker-width: 2;
    marker-allow-overlap: true;
}

this is a statement

#layer {
    marker-fill: #ff307a;
    marker-line-color: #FFF;
    marker-line-width: 0.25;
    marker-line-opacity: 0.4;
    marker-width: 2;
    marker-allow-overlap: true;
}

statements start with a selector

#layer

always put a { after the selector

#layer {

and always always remember to close it with }

#layer {
}

and always always remember to close it with }

#layer {
}

otherwise your statement will never end!

between { }, set your properties

think of the { } as bookends

source

what is a property?

they're defined in the documentation for CartoCSS

#layer {
  marker-fill: #ff307a;
}

#layer {
  marker-fill: #ff307a;
}

always one per line, each line ending with a ;

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
}

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
}

separate the property name and the value by a :

property values will often be color strings, numbers, or true/false

check the documentation if you have any doubts

in-class exercise, part 1

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
}
marker-width: 5;

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
}
marker-width: 5;

don't do this!

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
}
marker-width: 5;

this line won't do anything

Carto often splits polygon fill and outline into two statements

#layer {
  polygon-fill: #826DBA;
  polygon-opacity: 0.9;
}
#layer::outline {
  line-width: 1;
  line-color: #FFFFFF;
  line-opacity: 0.5;
}

#layer {
  marker-fill: #ff307a;
  marker-line-color: #FFF;
  marker-line-width: 0.25;
  marker-line-opacity: 0.4;
  marker-width: 2;
  marker-allow-overlap: true;
}

let's vary some properties by zoom level

#layer {
  marker-width: 3;

  [zoom >= 10] {
    marker-width: 8;
  }
}

let's call these conditional statements

conditional statements are only used if some condition is met

#layer {
  marker-width: 3;

  [zoom >= 10] {
    marker-width: 8;
  }
}

"make the markers 3 pixels wide. if the map is at zoom level 10 or higher, make the markers 8 pixels wide."

#layer {
  marker-width: 3;

  [zoom >= 10] {
    marker-width: 8;
  }
  [zoom >= 16] {
    marker-width: 13;
  }
}

in-class exercise, part 2

#layer[zoom < 10] {
  marker-fill: blue;
  marker-allow-overlap: true;
  marker-width: 10;
}

#layer[zoom < 10] {
  marker-fill: blue;
  marker-allow-overlap: true;
  marker-width: 10;
}

what do you think this does?

#layer[zoom < 10] {
  marker-fill: blue;
  marker-allow-overlap: true;
  marker-width: 10;
}

only shows the layer when zoom is less than 10

that's not all!

you can change styles based on a feature's attributes

#layer {
  marker-width: 3;

  [bright_ti4 >= 350] {
    marker-width: 8;
  }
}

look familiar?

let's call these attribute-dependent styles

conditional statements on text? wrap the text in quotation marks

#layer {
  marker-width: 3;

  [confidence = 'low'] {
    marker-width: 8;
  }
}

in-class exercise, part 3

you don't have to memorize all of this

cartocss reference

watch the video

use the documentation

experiment with Carto's built-in styles, see the code they produce

read other people's CartoCSS

source

combine conditions to set properties with both conditions

#layer {
  marker-width: 3;

  [bright_ti4 > 350][confidence = 'low'] {
    marker-width: 8;
  }
}

#layer {
  marker-width: 3;

  [bright_ti4 > 350][confidence = 'low'] {
    marker-width: 8;
  }
}

make markers where bright_ti4 is greater than 350 and location = "low" larger

recap

conditional statements look like

[bright_ti4 >= 350] {

}

restrict statements more by putting conditions next to each other

[bright_ti4 >= 300][bright_ti4 < 350] {

}

both conditions must be true

you can use as many of these as you need to

#layer {
  [bright_ti4 >= 7] {

  }
  [zoom >= 11] {

  }
  [zoom >= 12] {

  }
}

ramps

shorthand for classifying a column's values and giving each a color

#layer {
  marker-width: 3;
  marker-fill: ramp([bright_ti4], (#fbe6c5,
    #f2a28a, #dc7176, #b24b65, #70284a), jenks);
  marker-fill-opacity: 1;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
}


  marker-fill: ramp([bright_ti4], (#fbe6c5,
    #f2a28a, #dc7176, #b24b65, #70284a), jenks);

source

you can use colorbrewer ramps here

source

or copy from carto colors

source

Advanced GIS

Next week: final project thoughts

tell me about:

Something you would like to work on as your final project.

Past work you're excited about that might be a good interactive map.

Projects that you might like to emulate.

Thoughts about webmaps—what inspires you about them?

Map-related skills that you would like to acquire.

We will talk about these briefly next week.

Carto

Who uses Carto?

Carto can make every part of your web map if you want it to

Or you can do all of this on your own and ask Carto to just host our data

Both approaches can be useful

We'll start with letting Carto do everything for us

datasets

maps

categorized

graduated

let's talk about making features look different based on the zoom level

or "zoom-dependent styles"

this will take some code...

CartoCSS

you don't need to memorize any of this

watch the video

use the documentation

why?

you can share it

you can share it

it will give us more control over our map data

CartoCSS

CartoCSS

CartoCSS

this is a statement

this is a statement

statements start with a selector

statements start with a selector

always put a { after the selector

always put a { after the selector

and always always remember to close it with }

and always always remember to close it with }

and always always remember to close it with }

between { }, set your properties

think of the { } as bookends

what is a property?

they're defined in the documentation for CartoCSS

separate the property name and the value by a :

property values will often be color strings, numbers, or true/false

check the documentation if you have any doubts

in-class exercise, part 1

don't do this!

this line won't do anything

Carto often splits polygon fill and outline into two statements

let's vary some properties by zoom level

let's call these conditional statements

conditional statements are only used if some condition is met

in-class exercise, part 2

what do you think this does?

only shows the layer when zoom is less than 10

that's not all!

you can change styles based on a feature's attributes

look familiar?

let's call these attribute-dependent styles

conditional statements on text? wrap the text in quotation marks

in-class exercise, part 3

you don't have to memorize all of this

watch the video

use the documentation

experiment with Carto's built-in styles, see the code they produce

read other people's CartoCSS

combine conditions to set properties with both conditions

recap

conditional statements look like

restrict statements more by putting conditions next to each other

you can use as many of these as you need to

ramps

shorthand for classifying a column's values and giving each a color

you can use colorbrewer ramps here

or copy from carto colors

in-class exercise, part 4