Welcome to Advanced GIS, Lecture 9

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

→ to move forward

← to go back

Ruqing
Jenna
Ron

Advanced GIS

Class 9

JavaScript

embed a CartoDB map

example 

<iframe width='100%' height='520' frameborder='0' 
src='http://eric.cartodb.com/viz/22a36ecc-...' 
allowfullscreen webkitallowfullscreen mozallowfullscreen
oallowfullscreen msallowfullscreen></iframe>

where we're heading

signs
area selector

variables

var size = 5;

remember variables from CartoCSS?

khan academy 
var size = 5 + 1000;
var name = 'Bill';
var name = 'Bill';
var greeting = 'Hello, ' + name;

objects

var person = {
    name: 'Bill',
    age: 42
};
var person = {
    name: 'Bill',
    age: 42
};

use person.name to get 'Bill' out

functions

alert('hiiiii');
console.log('shhhh');
'maps'.toUpperCase();
person.name.toUpperCase();

libraries

libraries are bundles of code that you can load onto your page

libraries are generally open source and free

we're going to add maps to pages with libraries

CartoDB map in JavaScript

example

3 steps:

1: load CartoDB library


<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>

<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>

(you'll copy and paste this)

2: make a place for the map to go

<body>
    <div id="map"></div>
</body>

3: tell CartoDB to create the map

<script>
    $(document).ready(function () {
        cartodb.createVis('map', 'http://eric.cartodb.com/api/v2/viz/22a36ecc-0eb6-11e3-8f2f-5404a6a69006/viz.json');
    });
</script>
<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url);
    });
</script>
  1. load CartoDB library
  2. make a place for the map to go
  3. tell CartoDB to create the map

try it:

open jsbin.com/nifawivohi and replace the visualization url with one from your own maps

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

true

but there's more!

more customization

eg, remove the logo

<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url, {
            cartodb_logo: false
        });
    });
</script>
<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url, {
            cartodb_logo: false
        });
    });
</script>

try it:

remove the logo from your map

<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url, {
            cartodb_logo: false
        });
    });
</script>

or bigger changes

example

there are more options

CartoDB.js documentation

try it:

change another option on your map from http://docs.cartodb.com/cartodb-platform/cartodb-js.html#cartodbcreatevismapid-vizjsonurl-options--callback

<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url, {
            cartodb_logo: false,
            your_option: your_value
        });
    });
</script>

function

<script>
    $(document).ready(function () {
        cartodb.createVis(your_map_id,
                          your_visualization_url,
                          your_options);
    });
</script>

your map's id, url, options are the parameters

parameters

<script>
    $(document).ready(function () {
        cartodb.createVis(your_map_id,
                          your_visualization_url,
                          your_options);
    });
</script>

parameters affect the way a function works

jQuery

jQuery

makes it easy to do some common things in JavaScript

anything starting with $ is talking to jQuery

(it's not standard JavaScript)

$('#map')

$('#map').hide()

$('#map').animate({ opacity: 0 })

try this on your map in the console:

$('#map').animate({ width: 0 })
$('#map').click(function () {
    console.log("I've been clicked");
});

pick the div with id "map"

$('#map').click(function () {
    console.log("I've been clicked");
});

when it's clicked

$('#map').click(function () {
    console.log("I've been clicked");
});

run this code

$('#map').click(function () {
    console.log("I've been clicked");
});

try it:

add this in your map file on the line after createVis:

$('#map').click(function () {
    console.log("I've been clicked");
});

back to CartoDB

let's make a button that changes what's on the map

like this one

four steps:

  1. create a button
  2. get the map layer
  3. listen for a click on the button
  4. change the layer's SQL

look at jsbin.com/gusevenoce

1. create a button

<div id="just-manhattan">
    just Manhattan
</div>

2. get the map layer


cartodb.createVis(...)
.done(function (vis, layers) {
    dataLayer = layers[1].getSubLayer(0);     
});

3. listen for a click on the button

$('#just-manhattan').click(function () {
    ...
});

4. change the layer's SQL

$('#just-manhattan').click(function () {
    var sql = "SELECT * FROM sign_application_filings WHERE borough = 'MANHATTAN'";
    dataLayer.setSQL(sql);
});

try it:

edit jsbin.com/gusevenoce to select a different borough

try it:

edit jsbin.com/gusevenoce to work for one of your maps

(load your map, change SQL for your map)

getting to know JavaScript

khan academy
Codecademy
Eloquent JavaScript