Advanced GIS

In-class Exercise: JavaScript

Part 1: Updating HTML using JavaScript

  1. Remix this Glitch project into your Glitch account.
  2. Using JavaScript only, make the page display today's date where it currently shows "...". There are detailed hints in the JavaScript file.
  3. Confirm that the changes you have made work.

Part 2: Using Mustache

  1. Remix this Glitch project into your Glitch account.
  2. Find the popup template in the HTML.
  3. Change the HTML. You can include other columns (in the JavaScript, in the featureClickColumns to see which are available here).
  4. Try adding a class to one of the elements in the popup template and styling that class in your CSS.

Part 3: Using the SQL API

  1. Remix this Glitch project into your Glitch account.
  2. Adapt the JavaScript to work on a dataset in your Carto account. You will have to change the:
    • username (line 13)
    • API key (line 14)
    • dataset name in the source (line 18)
    • CartoCSS (line 21)
    • count SQL (line 46)
    • username (line 50)
  3. Confirm that the changes you have made work.