WEEK 7: MapBox API
(February 19)

To Do This Week:

NO CLASS Monday Feb 17 – President’s Day

E-lit Projects (DUE Wednesday, February 19)

Final Submission Instructions:

  • Place your index.html file in a folder called elit.
  • Validate your HTML and CSS.
  • Upload your project folder to the server.
  • Submit the correct URL on Canvas.

Module Notes

Workshop  E-lit Projects…

 

Map Story (15%)
DUE March 19

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:

Include a statement at the top of your source code, enclosed in HTML comments (<!--...-->). This statement should:

  • Outline the sequence of technical steps for your JavaScript with the Mapbox API.
  • Describe how ChatGPT assisted in the ideation, planning, or debugging phases of your work.

Your Steps:

  1. Theme and Storyline Ideation: Select a theme for your map-based narrative, such as a personal journey, historical exploration, or fictional adventure.
  2. Storyboarding Locations: Identify at least five key locations to serve as markers on your map. Enhance each marker with media elements like images, text, audio, or video to enrich your story.
  3. Consultation with ChatGPT: Use ChatGPT to refine your storyline and ensure the technical feasibility of your plan with the Mapbox API and JavaScript.
  4. Map and Script Planning: Plan the Mapbox styles and JavaScript functions needed, including marker placement, customized popups, and multimedia integration.
  5. Implementing JavaScript and Mapbox API: Code your project, ensuring the HTML structure supports map and narrative elements. Use ChatGPT for JavaScript and Mapbox API assistance.
  6. Testing and Debugging: Test your map thoroughly, paying close attention to interactive features and multimedia playback.
  7. CSS Styling: Apply CSS to complement your narrative, ensuring the design enhances the storytelling experience.
  8. Integration Statement: In your source code comments, summarize your JavaScript steps and highlight ChatGPT’s role in your project.
  9. Final Submission: Place your index.html file in a folder called elit, validate your HTML and CSS, upload the folder to the server, and submit the URL through Canvas.

Suggested Innovative Map Ideas:

  • Personal Travel Story: Map a vacation or event with images, text, or audio to tell the story.
  • Historical Journey: Highlight key events or discoveries on a significant historical expedition using period media.
  • Literary Pilgrimage: Map locations featured in a novel or the life of an author, with excerpts or audio readings.
  • Environmental Impact: Showcase climate change effects or conservation efforts with before-and-after imagery or data visualizations.
  • Cultural Exploration: Highlight music, cuisine, or art from various regions, with media samples at each location.
  • Interactive Fiction: Craft a fictional narrative where users make choices at each marker, influencing the story’s direction.

JS Methods for the Map Project:

Key JavaScript methods for building your map:

classList: Add or remove CSS classes for an element.

const reset = document.querySelector('button');
reset.classList.remove('show');
reset.classList.add('hide');

forEach(): Iterate through an array.

const fruits = ["apple", "orange", "cherry"];
fruits.forEach(item => console.log(item));

addEventListener: Attach an event handler to an element.

const element = document.querySelector("button");
element.addEventListener("click", function() {
  document.querySelector("div").innerHTML = "Hello World";
});

Get Started:

Sign in to Mapbox. You will need an API access token to configure maps. Follow the instructions on the site to get started.

How to Find Latitude and Longitude:

  1. Open Google Maps and search for a place.
  2. Right-click on the map and select “What’s Here?”
  3. The latitude and longitude will appear at the bottom. Click to copy the coordinates.

Custom Styles:

Example of an Interactive Map:

JSON (JavaScript Object Notation):

JSON is used for storing and exchanging data. Here’s an example of an object literal:

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

meal.protein;          // returns "chicken"
meal.expression();     // alerts "buen provecho!"
meal.spicy[1];         // returns "mild"
meal.country.location[0]; // returns latitude

Learn more about JSON and objects:

Student Map Examples:

For more inspiration:

More Examples