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

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 8

spatial SQL

spatial SQL with CartoDB / PostGIS will let you do most GIS-y things you would want to do

ST_Buffer

the_geom vs the_geom_webmercator

the_geom is always in WGS84 (latitude and longitude)

the_geom_webmercator is always in web mercator

web mercator is the projection that map tiles are in

source

you need to have a column called the_geom_webmercator if you want it mapped

we know web mercator is in meters, so our buffer is 500 meters

in-class exercise, part 1

sometimes you want to use a spatial function on all your features at once

in this case you can use ST_Collect()

SELECT AVG(price)
FROM airbnb
SELECT AVG(price)
FROM airbnb

finds the average over all prices

SELECT ST_Collect(the_geom_webmercator) AS the_geom_webmercator
FROM airbnb
SELECT ST_Collect(the_geom_webmercator) AS the_geom_webmercator
FROM airbnb

makes one geometry out of all geometries

in-class exercise, part 2

making a point in latitude and longitude is unnecessarily difficult in PostGIS

CartoDB has a nice helper function for that

ST_DWithin

ST_DWithin

get features within a certain distance of another feature

in this case, within 5 km of a point we chose

SELECT * 
FROM crashes
WHERE ST_DWithin(the_geom_webmercator, ST_Transform(CDB_LatLng(40.582931, -74.150677), 3857), 5000)
SELECT * 
FROM crashes
WHERE ST_DWithin(the_geom_webmercator, ST_Transform(CDB_LatLng(40.582931, -74.150677), 3857), 5000)

the row's geom

SELECT * 
FROM crashes
WHERE ST_DWithin(the_geom_webmercator, ST_Transform(CDB_LatLng(40.582931, -74.150677), 3857), 5000)

a point we made up, in latlng, then converted to web mercator

ST_X
PostGIS spatial SQL examples
CartoDB Tips and Tricks
Boundless Introduction to PostGIS
CartoDB PostGIS workshop
CartoDB Map Academy

cartodb.js

It's an API that adds functionality to your page (rather than data)

I'll call this a library from now on

Since it adds functionality, you need to load some code

Just like Leaflet and jQuery

(you'll copy and paste this)

Then invoke it in your JavaScript

Wait where'd this come from?!

here's an example

in-class exercise, part 3

OK but that seems like a lot of effort to embed a map from CartoDB

true

But there's more!

Now you can customize everything

createVis

createVis() takes an object of options

createVis
createVis

in-class exercise, part 4