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

project milestones

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

let's talk about project milestones in small groups

tell your breakout group about your current project status

creating data to use in a GIS

for your project, you may be creating data from scratch

if it's possible to start from another dataset, I will generally recommend this

but if you do need to create your own data, there are a few ways:

  1. create a spreadsheet (in Excel) and geocode it
  2. create a shapefile, trace satellite imagery
  3. create a shapefile, trace an image of a map
source

if you're geocoding, I recommend a site like geocod.io

source
source

if you're creating a shapefile in QGIS, you may want to follow this

source
source

similarly if you are going to trace a map image

source
source

think about:

source
source

there is a video of the following section

source
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:

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
source
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
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
source

here rows is an array

source

an li is made for each element in that array

source

getting data from Carto

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
source

let's take a look at the code behind this

source
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