Welcome to Advanced Interactive Web Mapping, Programming, and Design, Class 2

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

→ to move forward

← to go back

Advanced Interactive Web Mapping, Programming, and Design

Class 2

CartoCSS

(open source)

why?

styling maps can be painful

you can share it

you can share it

(it's just text)

signs

openstreetmap-carto

CartoCSS

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

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

always check the documentation if you have any doubts

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

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

that's not all!

you can change styles based on a feature's attributes

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

look familiar?

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

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

you don't have to memorize all of this

use the documentation

experiment with CartoDB's visualization wizards, see the code they produce

read other people's CartoCSS

source

toner-github

try in-class exercise, part 2

but I wanted 6.5!

SQL

SQL

Structured Query Language

SQL

the language databases understand

you'll use SQL in two ways:

1. pulling data out of the database

2. changing the data in the database

databases are great at these types of questions

it's what they were made for

SQL helps you ask these questions in a way databases understand

CartoDB

SELECT: choose columns from a table

just list the columns:

SELECT students, teachers
FROM education

SELECT *: choose all columns

WHERE: choose rows from a table

these operators are the same as in most programming languages:

>
<
=
!=
>=
<=

for example:

SELECT *
FROM education
WHERE students > 100

and you combine them with AND / OR

for example:

SELECT *
FROM education
WHERE students > 100 
    AND students < 200

or you can negate a condition with NOT

for example:

SELECT *
FROM education
WHERE NOT (students > 100 
  OR op_type = 'religious')

SELECT does not change the table, it only changes your view of the table

you can also use SELECT to get a better idea of what data is in your table

count matching rows:

SELECT COUNT(*)
FROM education
WHERE students > 100 
  OR op_type = 'religious'

but you'll almost never want to use this statement for your map

SELECT trick: add "columns" to your selection

SELECT *, 5
FROM education

SELECT *, stdnt_fem / students
FROM education

SELECT *,
    (stdnt_fem / students) * 100
FROM education

SELECT *,
    (stdnt_fem / students) * 100
    AS stdnt_fem_per
FROM education

1. pulling data out of the database

2. changing the data in the database

you can also use SQL to quickly UPDATE or DELETE the data in your table

these will destroy data, so have a backup or test it with a table you don't need

UPDATE education
SET size = 'large'
WHERE students > 2500

DELETE FROM education
WHERE ...

more in the SQL reference

SQL shows up everywhere online

try in-class exercise, part 3

that's a lot, but there's a little more

postpostgis

postgres

SELECT *,
    (stdnt_fem / students) * 100
    AS stdnt_fem_per
FROM education

SELECT *, ST_area(the_geom)
FROM kiberaboundary
            

SELECT *,
  ST_area(
    ST_transform(
      the_geom_webmercator,
      21036
    )
  )
FROM kiberaboundary
            

SELECT education.*
FROM education, kiberaboundary
WHERE
  kiberaboundary.name = 'Silanga' AND
  ST_within(
    education.the_geom,
    kiberaboundary.the_geom
  )

embedding CartoDB maps using iframes

try in-class exercise, part 4