Advanced GIS

In-class Exercise: JavaScript

Part 1: Arrays

Remix this glitch site in your browser and open developer tools.
Go to the JavaScript file and add
```
console.log(lifeStages);
```
at the bottom. The contents of lifeStages should be logged in the Console tab in developer tools.
After that line, type
```
console.log(lifeStages[0]);
```
to see just the first element in the array.
Do the same for the second and third items in lifeStages.

Part 2: Objects

Remix this glitch site in your browser and open developer tools.
Add
```
console.log(coordinates);
```
to the end of the JavaScript file. In developer tools you should see an object with two properties.
Add
```
console.log(coordinates.latitude);
```
to the end of the JavaScript file. In developer tools you should see just the latitude value from the object.
In a similar way, get the longitude from coordinates.

Part 3: Functions

Continue working on your copy of this Glitch site from last week. (Ideally you'll work on the one you edited that uses your Carto account and data.)
We're going to work with the variable called map that is created on line 4. At the very bottom of the file, add a new line:
```
map.setZoom(10);
```
Look at the live view of the Glitch site—you should see that the map is zoomed in more than it was before.
You can type JavaScript code in Developer Tools, too. This is exactly the same as adding a line at the end of your file as we just did. This can be a nice way to experiment with code before putting it in your file. Open Developer Tools, to to the Console tab, and zoom out: type
```
map.setZoom(5)
```
then press Enter.
Let's confirm that the map is zoomed to the level we asked for. Type
```
map.getZoom()
```
on the console and you should see the zoom level on the console.
Try some other functions on the map in the console:
```
map.zoomIn()
map.zoomOut()
map.setView([0, 0], 2)
```

Part 4: Use a button to set the SQL of a layer

Start from a remix of this this Glitch site.
Look at the site using Show Live and confirm that the Juvenile habitat button works.

In the JavaScript, copy lines 46 - 55 and paste them at the end of the file. In the pasted lines, change the class to match the adult habitat button's and change the SQL to filter the data another way. The code might start as:

// Step 1: Find the button by its class. If you are using a different class, change this.
var juvenileButton = document.querySelector('.juvenile-button');

// Step 2: Add an event listener to the button. We will run some code whenever the button is clicked.
juvenileButton.addEventListener('click', function (e) {
  source.setQuery("SELECT * FROM hms_efh_2009tiger_shark WHERE life_stage = 'Juvenile'");

  // Sometimes it helps to log messages, here we log to let us know the button was clicked. You can see this if you open developer tools and look at the console.
  console.log('Juvenile was clicked');
});

and you want to change the variable name, class, and SQL. You should end up with something like:

// Step 1: Find the button by its class. If you are using a different class, change this.
var adultButton = document.querySelector('.adult-button');

// Step 2: Add an event listener to the button. We will run some code whenever the button is clicked.
adultButton.addEventListener('click', function (e) {
  source.setQuery("SELECT * FROM hms_efh_2009tiger_shark WHERE life_stage = 'Adult'");

  // Sometimes it helps to log messages, here we log to let us know the button was clicked. You can see this if you open developer tools and look at the console.
  console.log('Adult was clicked');
});

Time permitting, try the above again with the Neonate life stage and reset.