Welcome to Advanced GIS, Lecture 7

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

→ to move forward

← to go back

Advanced GIS

Class 7

next week:

next week:

next week:

3/23: no class

JavaScript

source
area selector
source
source
source

embedding a Carto map

<iframe width="100%" height="520" frameborder="0"
src="https://thenewschool.carto.com/u/brelsfoeagain/
builder/fd0fea4a-ee46-11e6-8c31-0ecd1babdde5/embed"
allowfullscreen webkitallowfullscreen mozallowfullscreen
oallowfullscreen msallowfullscreen></iframe>
source

3 steps:

1: load Carto library

libraries

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

libraries are generally open source and free

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

(you'll copy and paste this)

source

2: make a place for the map to go

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

3: tell Carto to create the map

<script>
    $(document).ready(function () {
        cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/0f95ca3a-02d9-11e7-b9b0-0ecd1babdde5/viz.json');
    });
</script>
$(document).ready(function () {
    // Do something
});
$(document).ready(function () {
    // Do something
});

wait until the page loads to do something

cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/0f95ca3a-02d9-11e7-b9b0-0ecd1babdde5/viz.json');
cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/0f95ca3a-02d9-11e7-b9b0-0ecd1babdde5/viz.json');

cartodb, please run the createVis function for me

functions

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

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

<script>
    $(document).ready(function () {
        cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/0f95ca3a-02d9-11e7-b9b0-0ecd1babdde5/viz.json');
    });
</script>
<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url);
    });
</script>
<script>
    $(document).ready(function () {
        cartodb.createVis('map', your_visualization_url);
    });
</script>

what is your_visualization_url?

well this used to work

for now we have to create this url on our own

https://thenewschool.carto.com/u/{username}/api/v2/viz/{mapid}/viz.json
https://thenewschool.carto.com/u/{username}/api/v2/viz/{mapid}/viz.json

replace {username} and {mapid}

okay what is {mapid}?

everything after /builder/ in the url when you're editing the map

in this case, 79edb122-0374-11e7-b189-0e233c30368f

  1. load Carto library
  2. make a place for the map to go
  3. tell Carto to create the map

let's javascript a map!

in-class exercise, part 1

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

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>

objects

{
    cartodb_logo: false
}
{
    cartodb_logo: false,
    zoom: 5
}

there are more options

Carto.js documentation

let's change more options

in-class exercise, part 2

jQuery

jQuery

makes it easier 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 })
$('.public-water').click(function () {
    console.log("click");
});

pick the div with class "public-water"

$('.public-water').click(function () {
    console.log("click");
});

when it's clicked

$('.public-water').click(function () {
    console.log("click");
});

run this code

$('.public-water').click(function () {
    console.log("click");
});

back to Carto

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

like this one

or this one

source

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 the example

1. create a button

<button class="public-water">public water</button>

2. get the map layer


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

3. listen for a click on the button

$('.public-water').click(function () {
    ...
});

4. change the layer's SQL

$('.public-water').click(function () {
    watsanLayer.setSQL("SELECT * FROM watsan WHERE watsan = 'water_public'");
});

let's work with some buttons

in-class exercise, part 3

this doesn't always go smoothly

I will provide templates for you to work from

I recommend working through some introductory JavaScript lessons

khan academy
Codecademy
Eloquent JavaScript

variables

var sql = 'SELECT * FROM watsan';
khan academy

variables can be numbers

var size = 5;

and you can do math on them

var size = 5 * 1000;

variables can also be strings (text)

var sql = 'SELECT * FROM watsan';

and you can add strings together

var type = 'urban_agriculture';
var sql = "SELECT * FROM watsan WHERE watsan = '" + type + "'";

try it:

copy jsbin.com/hasumo/edit into Brackets and select a different watsan

you can do this with any other kind of input

  1. Add the input to the page
  2. Listen for the input to change
  3. Update your data layer's SQL

let's do this with a dropdown

full example

1. Add a dropdown

<select class="type-picker">
    <option value="all">All types</option>
    <option value="bathroom">bathroom</option>
    <option value="other">other</option>
</select>

2. Listen for it to change

$('.type-picker').change(function () {
});

3. Update the SQL

$('.type-picker').change(function () {
  var type = $(this).val();
  var sql;
  if (type === 'all') {
    sql = "SELECT * FROM watsan";
  }
  else {
    sql = "SELECT * FROM watsan WHERE watsan = '" + type + "'";
  }
  dataLayer.setSQL(sql);
});
$('.type-picker').change(function () {
  var type = $(this).val();
});
$('.type-picker').change(function () {
  var type = $(this).val();
});

get the selected type

$('.type-picker').change(function () {
  var type = $(this).val();
  var sql;
  if (type === 'all') {
    sql = "SELECT * FROM watsan";
  }
});
$('.type-picker').change(function () {
  var type = $(this).val();
  var sql;
  if (type === 'all') {
    sql = "SELECT * FROM watsan";
  }
});

if "all types" selected, show all the data

$('.type-picker').change(function () {
  var type = $(this).val();
  var sql;
  if (type === 'all') {
    sql = "SELECT * FROM watsan";
  }
  else {
    sql = "SELECT * FROM watsan WHERE watsan = '" + type + "'";
  }
  dataLayer.setSQL(sql);
});

else set an appropriate WHERE condition

full example