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

Graydon
Nate
source
  1. load Carto and Leaflet libraries
  2. make a place for the map to go
  3. tell Carto and Leaflet to create the map
source

a few things leaflet does:

tiles

popups

zoom and pan

leaflet is used all over the place

leaflet is used all over the place

leaflet is used all over the place

leaflet is used all over the place

+ tons of other sites with maps on them

source
source

why's it so popular?

you can use it for free forever

you can use it for free forever (as long as you have a place to host your site)

it also has some handy plugins we'll talk about soon

variables

variables hold on to things so you can use them later

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 greeting = 'Hello world';

variables can also be strings (text)

var greeting = 'Hello world';

strings are wrapped in ' or "

var greeting = 'Hello world';

strings are wrapped in ' or "

var greeting = 'Hello world';
var greeting = "Hello world";

strings are wrapped in ' or "

var greeting = 'Hello world';
var greeting = "Hello world";

either works!

and you can add strings together

var query = 'SELECT * FROM listings';
query + ' WHERE price > 100';

variables can also be other things like maps

variables can also be other things like maps

var map = L.map('map');

variables can only have characters and numbers in their names

so don't to this:

var shark map = L.map('map');

and don't to this:

var shark-map = L.map('map');

do this instead:

var sharkMap = L.map('map');

sometimes we want to see the value of a variable

the most straightforward way is usually to use console.log()

like this:

console.log(query);

whatever you log ends up in developer tools

arrays

arrays are lists of things

var ratings = [
    5,
    3,
    4.5
];
var lifeStages = [
    'Neonate',
    'Juvenile',
    'Adult'
];
var lifeStages = [
    'Neonate',
    'Juvenile',
    'Adult'
];
lifeStages[0] is 'Neonate' 
var lifeStages = [
    'Neonate',
    'Juvenile',
    'Adult'
];
lifeStages[1] is 'Juvenile'

[ and ] in JavaScript almost always mean we're making an array or getting something out of one

in-class exercise, part 1

objects

objects store structured data

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

you can think of objects like dictionaries of keys and values

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

get a value out of an object with .

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

sometimes with "" around keys

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

you'll see objects when setting options:

var map = L.map('map', {
  center: [30, 0],
  zoom: 3
});

you'll see objects when setting options:

var map = L.map('map', {
  center: [30, 0],
  zoom: 3
});

{ and } in JavaScript can mean many things, but for now they mean we're making an object

in-class exercise, part 2

functions

functions are small pieces of reusable code

var source = new carto.source.SQL('SELECT * FROM hms_efh_2009tiger_shark');
alert('NO');
console.log('The code got here');
Math.max(2, 25);
var source = new carto.source.SQL('SELECT * FROM hms_efh_2009tiger_shark');

parameters

parameters affect the way a function works

var source = new carto.source.SQL('SELECT * FROM hms_efh_2009tiger_shark');

when you change this text, the function makes a different query for you

in-class exercise, part 3

we can use functions to change the data on a layer

get all of the data in the dataset:

var source = new carto.source.SQL('SELECT * FROM hms_efh_2009tiger_shark');

then later in our code we can change the SQL

source.setQuery("SELECT * FROM hms_efh_2009tiger_shark WHERE life_stage = 'Juvenile'");

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

like this one

source

three steps:

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

look at the example

1. create a button

<button class="juvenile-button">
  just show Juvenile habitat
</button>

2. listen for a click on the button

juvenileButton.addEventListener('click', function (e) {
  ...
});

3. change the layer's SQL

juvenileButton.addEventListener('click', function (e) {
  source.setQuery("SELECT * FROM hms_efh_2009tiger_shark WHERE life_stage = 'Juvenile'");
});

let's work with some buttons

in-class exercise, part 4

you can do similar things with other inputs

source
source

we'll talk more about these next time