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

source

Gulsum

Kritika

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

source

small polygons tend not to appear well when zoomed out

source

so consider showing points when zoomed out, polygons when zoomed in

source

usually I do this with two separate layers

You might use this to conditionally hide labels

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