Welcome to Advanced GIS, Lecture 9

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

→ to move forward

← to go back

Advanced GIS

Class 9

source

last time:

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'");
});

you could make a button for each type of watsan feature

SELECT * 
FROM watsan 
WHERE watsan = 'urban_agriculture'

SELECT * 
FROM watsan 
WHERE watsan = 'toilet_public'

but that's kinda what dropdowns are for

livinglotsnyc.org

1. create a dropdown

<select class="type-picker">
    <option value="all">All types</option>
    <option value="bathroom">bathroom</option>
    <option value="biocentre">biocentre</option>
    <option value="dumping_site">dumping site</option>
</select>

2. listen for a change to the dropdown

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

with a dropdown, you want to vary the SQL by the option selected

SELECT * 
FROM watsan 
WHERE watsan = 'urban_agriculture'

SELECT * 
FROM watsan 
WHERE watsan = 'toilet_public'

$('.type-picker').val()

var type = $('.type-picker').val();
var sql = "SELECT * FROM watsan WHERE watsan = " + type;

var type = $('.type-picker').val();
var sql = "SELECT * FROM watsan WHERE watsan = '" + type + "'";

let's look at this together

in-class exercise, part 1

arrays

arrays are lists of things

var types = [
    'urban_agriculture',
    'biocentre',
    'toilet_public'
];

var ratings = [
    5,
    3,
    4.5
];

why's poignant guide to ruby

var types = [
    'urban_agriculture',
    'biocentre',
    'toilet_public'
];

var types = [
    'urban_agriculture',
    'biocentre',
    'toilet_public'
];

types[0] is 'urban_agriculture'

var types = [
    'urban_agriculture',
    'biocentre',
    'toilet_public'
];

types[1] is 'biocentre'

in-class exercise, part 2

objects

objects store structured data

var coordinates = {
    latitude: 41.56,
    longitude: -73.29
};

you can think of objects like dictionaries

var coordinates = {
    latitude: 41.56,
    longitude: -73.29
};

coordinates.latitude is 41.56

sometimes with "" around field names

var coordinates = {
    "latitude": 41.56,
    "longitude": -73.29
};

in-class exercise, part 3

objects and arrays can be combined

var data = {
    "rows": [
        {"count":208}
    ],
    "time":0.006,
    "fields": {
        "count": {"type":"number"}
    },
    "total_rows":1
};

var data = {
    "rows": [
        {"count":208}
    ],
    "time":0.006,
    "fields": {
        "count": {"type":"number"}
    },
    "total_rows":1
};

data.rows is

[
    {"count":208}
]

var data = {
    "rows": [
        {"count":208}
    ],
    "time":0.006,
    "fields": {
        "count": {"type":"number"}
    },
    "total_rows":1
};

data.rows[0] is {"count":208}

var data = {
    "rows": [
        {"count":208}
    ],
    "time":0.006,
    "fields": {
        "count": {"type":"number"}
    },
    "total_rows":1
};

data.rows[0].count is 208

getting data from Carto

with JavaScript you can ask Carto for any data from your datasets

this can be handy for showing summaries on a page

source

or listing features

source

you do this by giving Carto the SQL, and it returns an object of data

var data = {
    "rows": [
        {"count":208}
    ],
    "time":0.006,
    "fields": {
        "count": {"type":"number"}
    },
    "total_rows":1
};

let's look at this example

source

sometimes you need more control than Carto gives you

a few things leaflet does:

tiles

popups

zoom and pan

leaflet is used all over the place

+ tons of other sites with maps on them

3 steps:

1. load leaflet's code

2. make a div for your map

3. tell leaflet to create the map

1. load leaflet's code

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

2. make a `div` for your map

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

3. tell leaflet to create the map

var map = L.map('map').setView([40.70, -73.96], 11);

3a. add base tiles


L.tileLayer('https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox'
}).addTo(map);

simple leaflet map