WEEK 7: MapBox API
(February 19)

To Do This Week:

NO CLASS Monday Feb 17 – President’s Day

E-lit Projects (DUE Wednesday, February 26)

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

Interactive Assignment

 

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 <script>. This statement should:

  • A brief description of how ChatGPT assisted in the ideation, planning, and/or debugging phases of your work.
  • Outline the sequence of technical steps for your JavaScript with the Mapbox API.
  • Include comments within the script as well.

Your Steps:

  1. Explore the MapBox API: What is possible? What are the interactive map techniques you want to work with?
  2. Theme and Storyline Ideation: Select a theme for your map-based narrative, such as a personal journey, historical exploration, or fictional adventure.
  3. Storyboarding Locations: Identify at least five key locations to serve as markers on your map. How will they be displayed? How will the user interact with these locations?
  4. Consultation with ChatGPT: Use ChatGPT to refine your storyline and ensure the technical feasibility of your plan with the Mapbox API and JavaScript.
  5. Interactive Design: Plan the Mapbox styles, the layout, JavaScript functions needed, including marker placement, customized popups, and multimedia integration.
  6. Implementing JavaScript and Mapbox API: Code your project with the MapBox API code samples, ensuring the HTML structure supports map and narrative elements. Use ChatGPT for JavaScript and Mapbox API assistance.
  7. Testing and Debugging: Test your map thoroughly, paying close attention to interactive features and multimedia playback.
  8. CSS Styling: Apply CSS to complement your narrative, ensuring the design enhances the storytelling experience.
  9. Integration Statement: In your source code comments, summarize your JavaScript steps and highlight ChatGPT’s role in your project.
  10. Final Submission: Place your index.html file in a folder called map, 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');

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