WEEK 6: Javascript / MapBox API
(February 13 & 15)

To Do This Week:


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

Map Project

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


Elit 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 6th

Demo Talk:
MapBox – make a basic map
Intro: Objects, Object Literals and Geojson


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