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

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 9

As with $.getJSON(), you can add a done callback

cartodb.createVis(...)
    .done(function (vis, layers) {
        console.log('vis loaded!');
    });

layers is an array of layers, the first one is the base map

CartoDB.js docs

jsbin

cartodb.createVis(...)
    .done(function (vis, layers) {
        layers[1].hide();
    });

jsbin

layers[1] is all the visualization layers

in-class exercise, part 1

if you want to get one of those layers, use getSubLayer()

CartoDB.js docs

sublayers are cool!

they give you access to everything you have in the CartoDB UI

they give you access to everything you have in the CartoDB UI

SQL, CartoCSS

and you can change those dynamically

jsbin

in-class exercise, part 2

scope! layers won't be available outside of createVis().done()

if you want to use a sublayer when reacting to a user's input, you need to save the sublayer to a variable

jsbin

put var <your_sublayer_name> somewhere before createVis().done()

jsbin

in-class exercise, part 3

but I want to add a plugin to a CartoDB map

no problem!

CartoDB.js wraps Leaflet

CartoDB.js docs

getNativeMap()

CartoDB.js docs

access vis in createVis()
.done()

CartoDB.js docs

in-class exercise, part 4