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

Joy

Christina

Ashley

Jakob

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 the geoweb—what inspires you about online maps?

Map-related skills that you would like to acquire.

We will go around the room and talk about these briefly next week.

CARTO

source

github.com/CartoDB/cartodb

Who uses CARTO?

Mapping the Historical Biodiversity of the Solomon Islands...

Making Neighborhoods

The ToxiCity Map

source

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

CartoCSS

(open source)

why?

styling maps can be painful

you can share it

(it's just text)

source

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 (line thickness, color) to webpages, CartoCSS does the same for maps.

mrstaticvoid on flickr

niklasstjerna on flickr

#earthquakes {
    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

#earthquakes {
    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

#earthquakes

statements start with a selector

#earthquakes

"this statement will talk about the layer called earthquakes"

always put a { after the selector

#earthquakes {

and always always remember to close it with }

#earthquakes {
}

and always always remember to close it with }

#earthquakes {
}

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

#earthquakes {
    marker-fill: #ff307a;
}

#earthquakes {
    marker-fill: #ff307a;
}

always one per line, each line ending with a ;

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

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

the property name and the value you're setting it to are separated by a :

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

check the documentation if you have any doubts

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

in-class exercise, part 1

that's nice, but it gets more interesting

let's vary some properties by zoom level

#earthquakes {
    marker-width: 3;

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

let's call these conditional statements

conditional statements are only used if some condition is met

#earthquakes {
    marker-width: 3;

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

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

#earthquakes {
    marker-width: 3;

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

in-class exercise, part 2

that's not all!

you can change styles based on a feature's attributes

#earthquakes {
    marker-width: 3;

    [mag >= 5.5] {
        marker-width: 8;
    }
}

look familiar?

conditional statements on text need to wrap those strings in quotation marks

#earthquakes {
    marker-width: 3;

    [locationsource = 'pr'] {
        marker-width: 8;
    }
}

in-class exercise, part 3

you don't have to memorize all of this

cartocss reference

use the documentation

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

read other people's CartoCSS

source

combine conditions with , to set properties with either condition

#earthquakes {
    marker-width: 3;

    [mag > 5.5],
    [locationsource = 'pr'] {
        marker-width: 8;
    }
}

shortcut for:

#earthquakes {
    marker-width: 3;

    [mag > 5.5] {
        marker-width: 8;
    }
    [locationsource = 'pr'] {
        marker-width: 8;
    }
}

#earthquakes {
    marker-width: 3;

    [mag > 5.5],
    [locationsource = 'pr'] {
        marker-width: 8;
    }
}

combine conditions without a , to set properties with both conditions

#earthquakes {
    marker-width: 3;

    [mag > 5.5][locationsource = 'pr'] {
        marker-width: 8;
    }
}

#earthquakes {
    marker-width: 3;

    [mag > 5.5][locationsource = 'pr'] {
        marker-width: 8;
    }
}

make markers where mag is greater than 5.5 and locationsource = "pr" larger

recap

conditional statements look like

[mag >= 5.5] {

}

restrict statements more by putting conditions next to each other

[mag >= 5.5][mag < 7] {

}

both conditions must be true

include more features by separating conditions with ,

[mag >= 5.5],
[zoom >= 10] {

}

either condition could be true

you can use as many of these as you need to

#earthquakes {
    [mag >= 7] {

    }
    [zoom >= 11] {

    }
    [zoom >= 12] {

    }
}

you can split them up more if you prefer

#earthquakes[mag >= 7] {

}
#earthquakes[zoom >= 11] {

}
#earthquakes[zoom >= 12] {

}

#earthquakes {
    marker-width: 5;
    marker-fill: #ff307a;
    marker-allow-overlap: true;

    [zoom >= 4] {
        marker-width: 10;
    }
    [zoom >= 8] {
        marker-width: 15;
    }
    [zoom >= 12] {
        marker-width: 20;
    }
}

what if I want to change marker-width?

#earthquakes {
    marker-width: 6;
    marker-fill: #ff307a;
    marker-allow-overlap: true;

    [zoom >= 4] {
        marker-width: 12;
    }
    [zoom >= 8] {
        marker-width: 18;
    }
    [zoom >= 12] {
        marker-width: 24;
    }
}

there's a better way!

variables

@width: 6;
#earthquakes {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;

    [zoom >= 4] {
        marker-width: 12;
    }
    [zoom >= 8] {
        marker-width: 18;
    }
    [zoom >= 12] {
        marker-width: 24;
    }
}

@width: 6;
#earthquakes {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;

    [zoom >= 4] {
        marker-width: @width * 2;
    }
    [zoom >= 8] {
        marker-width: @width * 3;
    }
    [zoom >= 12] {
        marker-width: @width * 4;
    }
}

then I can change all the widths at once

@width: 8;
#earthquakes {
    marker-width: @width;
    marker-fill: #ff307a;
    marker-allow-overlap: true;

    [zoom >= 4] {
        marker-width: @width * 2;
    }
    [zoom >= 8] {
        marker-width: @width * 3;
    }
    [zoom >= 12] {
        marker-width: @width * 4;
    }
}

it works with colors, too

@earthquakecolor: #ff307a;
#earthquakes {
    marker-width: @width;
    marker-fill: @earthquakecolor;
    marker-line-color: @earthquakecolor;
    marker-line-opacity: 0.2;
    marker-allow-overlap: true;
}

@earthquakecolor: #ff307a;
#earthquakes {
    marker-width: @width;
    marker-fill: fadeout(@earthquakecolor, 25%);
    marker-line-color: @earthquakecolor;
    marker-line-opacity: 0.2;
    marker-allow-overlap: true;
}

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 the geoweb—what inspires you about online maps?

Map-related skills that you would like to acquire.

We will go around the room and talk about these briefly next week.

CARTO

Who uses CARTO?

datasets

maps

CartoCSS

why?

styling maps can be painful

you can share it

you can share it

CartoCSS

CartoCSS

CartoCSS

this is a statement

this is a statement

statements start with a selector

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

the property name and the value you're setting it to are separated 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

that's nice, but it gets more interesting

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

that's not all!

you can change styles based on a feature's attributes

look familiar?

conditional statements on text need to wrap those strings in quotation marks

in-class exercise, part 3

you don't have to memorize all of this

use the documentation

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

read other people's CartoCSS

combine conditions with , to set properties with either condition

combine conditions without a , to set properties with both conditions

recap

conditional statements look like

restrict statements more by putting conditions next to each other

include more features by separating conditions with ,

you can use as many of these as you need to

you can split them up more if you prefer

what if I want to change marker-width?

there's a better way!

variables

then I can change all the widths at once

it works with colors, too

in-class exercise, part 4