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 this Glitch site.
Look at the site using Show Live and confirm that the button works.

Add another button in the HTML and set its class to something other than the existing button's class. For example, we have:

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

and you should work toward:

<div class="buttons">
    <button class="juvenile-button">
        just show Juvenile habitat
    </button>
    <button class="adult-button">
        just show Adult habitat
    </button>
</div>

In the JavaScript, copy and paste lines 46 - 55. In the pasted lines, change the class to match the new 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.