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

To Do This Week:

Assignment:

E-lit Projects are Due Feb 22th. 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 – place in a folder called “elit”, first page is “index.html”

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. Integrate the design by styling the site with CSS with and the map with MapBox styles. 

JS Methods for the Map Project

classList = access to HTML elements’ CSS classes

const reset = document.querySelector('button');

reset.classList.remove('show');
reset.classList.add('hide');

forEach() = iterator function that works on each item of an array

const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item) {
   item.toUpperCase();
}

addEventListener

const element = document.querySelector("button");
element.addEventListener("click", myFunction);

function myFunction() {
  document.querySelector("div").innerHTML = "Hello World";
}

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 API reference

Mapbox Tutorials

Make a simple map from this 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/lon

CUSTOM STYLES:

Mapbox Styles reference

Mapbox Styles Gallery

Mapbox Studio to access map style

EXAMPLE OF AN INTERACTIVE MAP:

mapbox-markers-example 

mapbox-markers-example.zip

 

JSON (JavaScript Object Notation):

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

*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

Lists of past Map Projects: