WEEK 6: Javascript / MapBox API
(February 22-26)

To Do This Week:


E-lit Projects are Due Tuesday Feb 23rd. Please upload in a folder called “elit”. Check that your link works here: Elit projects

  1. Join and Explore the  Mapbox API
  2. Get a token to start using the  API
  3. Try to create a simple map

Video Lectures:

Please watch from where the video starts – I don’t want to confuse with different dates. Also, I mention jQuery in relation to this Map project, but we are not going too deeply into jQuery in this class and the Map project will not require it.

Zoom Class

DTC Superpower Survey
Elit projects
MapBox – make a basic map
Intro: Objects, Object Literals and Geojson

Zoom Workshop

MapBox Projects


Map Story –  (10%)

Build a site using the Mapbox API .  Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with javascript and interactive features with jQuery.

DUE Friday March 19th



Sign-in to Mapbox. You will need an API access token to configure maps. Just follow instructions.

Mapbox GL JS API 

Mapbox GL JS examples

Mapbox blog

Mapbox Examples


Mapbox Styles reference

Mapbox Styles Gallery

Mapbox Studio to access map style

EXAMPLE MAP (with jQuery):

mapbox-markers-example | mapbox-markers-jQuery-example


How to get latitude and longitude for your map locations?

  1. Go to Google Maps.
  2. Search for a place.
  3. Control click any place on the map.
  4. In the pop-up, you will see “What’s Here?”. Click that and at the bottom of the page you will see that lat/long coordinates.
  5. Click this and the map will zoom to that location and at the top of the left sidebar you will be able to copy the lat/long


JavaScript Object Notation:

Intro to Objects – wait of Objects and Classes tutorial

intro to JSON: javascript object notation, used for storing and exchanging data.

*This class had previously used Google Maps API, but they now require a credit card. So I switched to the more elegant Mapbox API. It does not have the very cool Streetview capability.

Innovative Map Projects  (for inspiration)

Student Examples

Object Literals:

let meal = {
   vegetable: "peppers",
   protein:  "chicken",
   carb: "rice",
   expression : function() {
        alert("buen provecho!");      
   spicy: ["none", "mild", "medium", "hot"],
   country: {
       name: "Mexico";
       location: [lat, long];

meal.protein;  // returns "chicken"
meal.expression();  // returns alert box that says "buen provecho!"
meal.spicy[1]; // returns "mild"
meal.country.location[0]; //returns lat