Welcome to Methods 3, Lecture 8

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

→ to move forward

← to go back

Methods 3

Maha Carto map

Gemma Carto map

preparing data for the web

what if your data takes up too much space?

or is so large it's taking too long to upload?

you either have to reduce the number of features or make the features smaller

1. clip/filter features if you can

2. delete attributes

3. simplify polygons

2. delete attributes you don't need

3. simplify polygons: QGIS or mapshaper.org

source

1. clip/filter features if you can

2. delete attributes

3. simplify polygons

analysis

in many cases, these are shortcuts for things you'll do in QGIS

geocoding

buffer

convex hull

some take a long time or won't work at all

some are only available if you pay for credits

you can chain analyses

for example, to combine filters

how is a webmap different from a map made in QGIS?

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

or "zoom-dependent styles"

this will take a little...

code

#layer {
  marker-width: 2;
  marker-fill: #EE4D5A;
  marker-fill-opacity: 0.9;
  marker-line-color: #FFFFFF;
  marker-line-width: 1;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-allow-overlap: true;

  [zoom >= 3] {
    marker-width: 5;
  }
}

CartoCSS

(open source)

why?

you can do more with it

you can share it

(it's just text)

source

CartoCSS

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;
}

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

#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;
}

in-class exercise, part 1

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

that's not all!

you can change styles based on a feature's attributes

#layer {
  marker-width: 3;
  ...
  [mag >= 6.5] {
    marker-width: 8;
  }
}

look familiar?

let's call these attribute-dependent styles

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

#layer {
  marker-width: 3;
  ...
  [place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

in-class exercise, part 3

more ways to get data

source

Getting data from OpenStreetMap

source

a free map of the world

source

kinda like a giant shapefile of the world

source

if you need a whole city

source

if you only need a certain feature type

source

Demonstrators Smash Google Bus Piñata in San Francisco

source

"We enlisted people to go to stops, measure traffic and count people getting off and on and we hired bike messengers to see where the buses went..."

source

"... The cyclists used Field Papers to transcribe the various routes and what they found out, which we recompiled back into a database of trips, stops, companies and frequency."

source

back to CartoCSS

combine conditions with , to set properties with either condition

#layer {
  marker-width: 3;
  ...
  [mag > 5.5],
  [place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

shortcut for:

#layer {
  marker-width: 3;
  ...
  [mag > 5.5] {
    marker-width: 8;
  }
  [place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

#layer {
  marker-width: 3;
  ...
  [mag > 5.5],
  [place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

make markers where mag is greater than 5.5 larger

also make markers with place of "Northern Mid-Atlantic Ridge" larger

combine conditions without a , to set properties with both conditions

#layer {
  marker-width: 3;
  ...
  [mag > 5.5][place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

#layer {
  marker-width: 3;
  ...
  [mag > 5.5][place = 'Northern Mid-Atlantic Ridge'] {
    marker-width: 8;
  }
}

make markers where mag is greater than 5.5 and place = "Northern Mid-Atlantic Ridge" 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

#layer {
  [mag >= 7] {
    ...
  }
  [zoom >= 11] {
    ...
  }
  [zoom >= 12] {
    ...
  }
  ...
}

you don't have to memorize all of this

cartocss reference

Methods 3

preparing data for the web

what if your data takes up too much space?

or is so large it's taking too long to upload?

you either have to reduce the number of features or make the features smaller

2. delete attributes you don't need

3. simplify polygons: QGIS or mapshaper.org

analysis

in many cases, these are shortcuts for things you'll do in QGIS

geocoding

buffer

convex hull

some take a long time or won't work at all

some are only available if you pay for credits

you can chain analyses

for example, to combine filters

how is a webmap different from a map made in QGIS?

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

or "zoom-dependent styles"

this will take a little...

code

CartoCSS

why?

you can do more with it

you can share it

you can share it

CartoCSS

this is a statement

this is a statement

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

don't do this!

this line won't do anything

Carto often splits polygon fill and outline into two statements

in-class exercise, part 1

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?

let's call these attribute-dependent styles

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

in-class exercise, part 3

more ways to get data

Getting data from OpenStreetMap

a free map of the world

kinda like a giant shapefile of the world

if you need a whole city

if you only need a certain feature type

back to 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 don't have to memorize all of this

use the documentation

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