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

To Do This Week:

Assignment:

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

Class

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

GET STARTED:

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

CUSTOM STYLES:

Mapbox Styles reference

Mapbox Styles Gallery

Mapbox Studio to access map style

EXAMPLE MAP (with jQuery):

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

mapbox-markers-example.zip

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

 

jQuery