Advanced GIS

In-class Exercise: JavaScript

Part 1: Change some settings on a map loaded in JavaScript

  1. Remix this Glitch in your account.
  2. The map is currently showing the whole world at once but the data is mostly on the eastern US coast. Let's recenter the map.
  3. In the script.js file on lines 4 - 8 there should be code like this: 
    var map = L.map('map', {
  center: [30, 0],
  zoom: 3
});
    In this code:
    1. 30 is the center latitude,
    2. 0 is the center longitude, and
    3. 3 is the zoom level.
  4. Try editing the zoom and see what changes on the map.
  5. Try editing the latitude and longitude. If you want to be more precise, try using bboxfinder to find a helpful center. (Keep an eye on the order of the latitude and longitude though!)

Part 2: Change the basemap

  1. Continuing with your code from the previous part, let's change the basemap. On line 9 there is a url like this: 
    https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png
  2. Change the basemap URL to another Carto style. Pick one of the following: 
    • https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
    • https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
    • https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png
    • https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png
    copy the url, and paste the url in the code on line 9.

Part 3: Load your own data

  1. Continuing with your code from the previous part, let's load your data on the map.
  2. In the code, we need to tell Carto which username we are using. On line 14 you should see my username (brelsfoeagain). Keeping the quotation marks, replace my username with your username.
  3. Next pick some data to load. Login to your Carto account and look at your datasets. It doesn't matter which one you pick for this exercise as long as it is valid. If the dataset is private, change the privacy settings so it is either public or Only accessible with link.
  4. Copy the exact name of the dataset and on line 20 replace my dataset name (hms_efh_2009tiger_shark) with yours. Again, the quotation marks need to remain.
  5. Style your data as you wish. I would recommend starting with some CartoCSS that you made within Carto. Replace my CartoCSS on lines 24 - 31 with your CartoCSS.