Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises: PostGIS SQL, CartoDB.js

Part 1: PostGIS SQL and Leaflet: buffers

Create an SQL query that buffers your Airbnb listings data (or some other point dataset) by 100 meters. The documentation for ST_Buffer might be of use.
Test your SQL query in CartoDB to confirm that it works.
Use the CartoDB SQL API to add the buffered data to a Leaflet map. Feel free to use this jsbin if it helps.
Style the features.

Part 2: PostGIS SQL and Leaflet: convex hulls

Create an SQL query that finds the convex hull of your Airbnb listings data (or some subset of them). You will need to use ST_Collect and ST_ConvexHull.
Test your SQL query in CartoDB to confirm that it works.
Use the CartoDB SQL API to add the convex hull to a Leaflet map. Feel free to use this jsbin if it helps.
Style the feature.

Part 3: CartoDB.js

Start a new HTML file, either on your computer or on JS Bin.
Load the CartoDB.js library by copying the two lines from the documentation under "Linking cartodb.js on your html file" and pasting those into the head of your HTML file.
As with Leaflet, add a div with id "map" to the body of your HTML file.
Use CSS to give the map div some dimensions.
Open your CartoDB account, find a visualization you've created.
Open the visualization, go to Share, and copy the CartoDB.js URL.

Finally, load the CartoDB visualization. Add the following to your JavaScript:

$(document).ready(function () {
    cartodb.createVis('map', /* Your CartoDB visualization's CartoDB.js URL */);
});

If you run into trouble, here's a working example.

Part 4: CartoDB.js options

Start with the code from Part 1.
Add at least three options to your call to createVis().

This will look something like:

$(document).ready(function () {
    cartodb.createVis('map', /* Your CartoDB visualization's CartoDB.js URL */, {
        option1: option1-value,
        option2: option2-value,
        option3: option3-value
    });
});