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

La Rainne

Emily

GIS from home

might be difficult to use!

if you don't have windows or a license

qgis.org

consider QGIS

qgis.org

if that won't work, some online tools might help

dropchop

source

mapshaper

source

don't hesitate to get in touch!

project milestones

in the best of times projects shift and milestones change

there will be another assignment this week, but otherwise please focus on your projects

let's talk about project milestones in small groups

there is a video of the following section

source

zooming and panning a map on an event

source

remember how to set the zoom and center of a map?

map.setView([30, -80], 5);

remember how to select a button and add a click event listener?

var zoomButton = document.querySelector('.zoom-content-button');
zoomButton.addEventListener('click', function () {
  // ... do something!
});

put them together:

var zoomButton = document.querySelector('.zoom-content-button');
zoomButton.addEventListener('click', function () {
  map.setView([30, -80], 5);
});

source

how would we add another button?

changing styles dynamically

there is a video of this section, too

source

the key here is that a Carto style can be updated with `setContent()`

style.setContent(`
  #layer {
    [life_stage = 'Adult'] {
      polygon-fill: green;
    }
    [life_stage = 'Juvenile'] {
      polygon-fill: blue;
    }
    [life_stage = 'Neonate'] {
      polygon-fill: pink;
    }
  }
`);

in `setContent()` you pass a string with the new CartoCSS to use

source

updating HTML from JavaScript

there is a video of this section, too

last time we talked about adding popups or putting data in a sidebar

source

first, select the element we want to contain our HTML

var sidebar =
  document.querySelector('.sidebar');

then, create a string in JavaScript with our HTML

var content = '<h3>' + event.data['host_name'] + '</h3>';
content += '<div>$' + event.data['price'] + ' per night</div>';

finally, put that HTML in the element we selected

sidebar.innerHTML = content;

in-class exercise, part 1

source

this can quickly get difficult to manage

source

you might prefer doing it the way we did in Carto

templates

templates create HTML for you

templates use variables from your code

template + data = html

Mustache

Mustache is one library for making templates

Mustache is the same library Carto uses to make popups

Mustache docs

you can make your own popup HTML

<div>
    <div>{{on_street_name}} and {{cross_street_name}}</div>
    <div>On {{date}} at {{time}}</div>
</div>

<div>
    <div>{{on_street_name}} and {{cross_street_name}}</div>
    <div>On {{date}} at {{time}}</div>
</div>

anything in {{}} gets replaced by Mustache

template:

<div>
    <div>{{on_street_name}} and {{cross_street_name}}</div>
    <div>On {{date}} at {{time}}</div>
</div>

data:

var context = {
    on_street_name: "BEDFORD AVENUE",
    cross_street_name: "AVENUE N",
    date: "01/23/2019",
    time: "18:42:00"
};

results in

<div>
    <div>BEDFORD AVENUE and AVENUE N</div>
    <div>On 01/23/2019 at 18:42:00</div>
</div>

we'll call the data you pass to the template its context

passing the context to Mustache tells it how to fill your template

take a look at this code

source

the nice thing about templates is you can keep your HTML and JavaScript separate

in-class exercise part 2

source

Mustache can also help with making HTML for a list of things

source

here `rows` is an array

source

an `li` is made for each element in that array

source

getting data from Carto

yup, there is a video of this section, too

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

this can be handy for showing summaries on a page

source

let's take a look at the code behind this

source

in-class exercise, part 3

source

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

https://brelsfoeagain.carto.com/api/v2/sql/?q=
  SELECT COUNT(*)
  FROM nypd_motor_vehicle_collisions

source

this is just a URL you can open in a browser

source

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

remember arrays and objects?

var lifeStages = [
    'Neonate',
    'Juvenile',
    'Adult'
];

var lifeStages = [
    'Neonate',
    'Juvenile',
    'Adult'
];

lifeStages[0] is 'Neonate'

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

coordinates.latitude is 41.56

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

source

learn more in the Carto documentation

source

Advanced GIS

GIS from home

might be difficult to use!

if you don't have windows or a license

consider QGIS

if that won't work, some online tools might help

dropchop

mapshaper

don't hesitate to get in touch!

project milestones

in the best of times projects shift and milestones change

there will be another assignment this week, but otherwise please focus on your projects

let's talk about project milestones in small groups

there is a video of the following section

zooming and panning a map on an event

remember how to set the zoom and center of a map?

remember how to select a button and add a click event listener?

put them together:

put them together:

how would we add another button?

changing styles dynamically

there is a video of this section, too

the key here is that a Carto style can be updated with setContent()

in setContent() you pass a string with the new CartoCSS to use

updating HTML from JavaScript

there is a video of this section, too

last time we talked about adding popups or putting data in a sidebar

first, select the element we want to contain our HTML

then, create a string in JavaScript with our HTML

finally, put that HTML in the element we selected

in-class exercise, part 1

this can quickly get difficult to manage

you might prefer doing it the way we did in Carto

templates

templates create HTML for you

templates use variables from your code

template + data = html

Mustache

Mustache is one library for making templates

Mustache is the same library Carto uses to make popups

you can make your own popup HTML

anything in {{}} gets replaced by Mustache

results in

we'll call the data you pass to the template its context

passing the context to Mustache tells it how to fill your template

take a look at this code

the nice thing about templates is you can keep your HTML and JavaScript separate

in-class exercise part 2

Mustache can also help with making HTML for a list of things

here rows is an array

an li is made for each element in that array

getting data from Carto

yup, there is a video of this section, too

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

this can be handy for showing summaries on a page

let's take a look at the code behind this

in-class exercise, part 3

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

this is just a URL you can open in a browser

remember arrays and objects?

learn more in the Carto documentation

the key here is that a Carto style can be updated with `setContent()`

in `setContent()` you pass a string with the new CartoCSS to use

here `rows` is an array

an `li` is made for each element in that array