WEEK 7: Javascript / MapBox API (February 21)

To Do This Week:

NO CLASS MONDAY – President’s Day

Work on E-lit Projects: DUE Wed February 21
Final Submission:  Place “index.html” in a folder called “elit”. Validate your HTML and CSS, upload your project folder to the server, and the submit the correct URL in Canvas.  

Class

Elit projects 

Map Story –  (15%)

For this project, you’ll be creating a  web-based storytelling experience that uses the Mapbox API to convey a narrative through geographical markers. This project requires a blend of creative storytelling, technical web development skills, and a thoughtful integration of multimedia elements. Follow these structured guidelines, using the MapBox API resources and examples as well as ChatGPT for brainstorming, planning, and problem-solving throughout your project’s development:

Project Statement

Your project should include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement will outline the sequence of technical steps for your JavaScript with the Mapbox API.  Include how ChatGPT aided in the ideation, planning, or debugging phases of your work.

Your Steps:

  1. Theme and Storyline Ideation: Begin by selecting a theme for your map-based narrative. This could be a personal journey, a historical exploration, a fictional adventure, or any story that can be represented through geographical locations.
  2. Storyboarding Locations: Identify at least 5 key locations that will serve as markers on your map. Each location should contribute to the overarching narrative. Consider what images, text, or multimedia elements (like video or audio clips) will accompany each marker to enrich the story.
  3. Consultation with ChatGPT: Discuss your storyline and technical approach with ChatGPT, refining your narrative and ensuring your plan is feasible with the Mapbox API and JavaScript.
  4. Map and Script Planning: Determine the Mapbox styles and JavaScript functions you’ll need to represent your story. This includes setting markers, customizing popups, and possibly integrating multimedia elements.
  5. Implementing JavaScript and Mapbox API: Begin coding, ensuring your HTML structure supports the map and narrative elements. Utilize ChatGPT for coding assistance, particularly for JavaScript and Mapbox API queries.
  6. Testing and Debugging: Test your map extensively to ensure all elements function as intended. Pay special attention to interactive features and multimedia playback.
  7. CSS Styling: Apply CSS to style your site, focusing on a design that complements and enhances the narrative experience without distracting from the map.
  8. Integration Statement: In your source code comments, summarize the script steps in natural language and highlight how ChatGPT supported your project.
  9. Final Submission: Place “index.html” in a folder called “elit”. Validate your HTML and CSS, then upload your project to a server. Submit the URL through your course management system.

Suggested Innovative Map Ideas:

  • Personal Travel Story: Create a map tracing the locations of a vacation, an event or tour that you participated in, such as he locations military service. Incorporate media to help tell the story.
  • Historical Journey: Map out a significant historical expedition, with markers detailing key events or discoveries made along the route. Incorporate period images and documents.
  • Literary Pilgrimage: Create a map tracing the locations featured in a novel or the life of an author, with excerpts or audio readings at each marker.
  • Environmental Impact: Showcase the effects of climate change or conservation efforts across different regions, using before-and-after imagery or data visualizations.
  • Cultural Exploration: Develop a map that explores music, cuisine, or art from various cultures, including samples, recipes, or performances at each location.
  • Interactive Fiction: Craft a fictional narrative where users make choices at each marker, influencing the direction of the story and leading to different outcomes.

By following these steps and incorporating these ideas, your project will not only demonstrate technical proficiency with the Mapbox API and web development but also offer a compelling, interactive story that engages users in a meaningful exploration of places and narratives.

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: