WEEK 8: Object Literals, Geojson & MapBox
(February 24 & February 26)

To Do This Week:

Gather info and plan Mapbox projects.

Module Notes

View Elit projects

  • Always include a title, author name, and date on projects!
  • If needed, include an explanation for interaction.
  • Make your steps in the statement reflect the order for JS to build the script – use lists! No need to include HTML and CSS setup in the steps.
  • Write or get ChatGPT to include comments in the script at each step.
  • Effort is a big part of the grade.

Map Projects: DUE March 19

Place index.html in a folder called map. Validate your HTML and CSS, then upload your project to a server. Submit the URL through your course management system.

Map Projects List

Map Ideas:

Explore Mapbox GL JS examples.

Mapbox Styles:

Mapbox Styles Gallery | Mapbox Studio

Objects, JSON, and Mapbox:

Design & Development Process:

  1. Using ChatGPT, create HTML and basic CSS with colored borders for the elements in the Map Project. Consider using CSS Grid, Flexbox, or position-fixed to place elements.
  2. For fixed body heights (no overflow), add the following CSS: 
    html, body {
  height: 100%;
  overflow: hidden;
}
  3. Build the basics of the JavaScript (no effects or complex arrays) to ensure functionality.
  4. Add animation or transition effects using the classList method with CSS transitions.
  5. Add more markers, images, media, text, and graphic elements.
  6. Complete CSS design for visual hierarchy.

Map Project: 15%
DUE March 19

Create a web-based storytelling experience using the Mapbox API to convey a narrative through geographical markers. This project requires a blend of creative storytelling, technical web development skills, and thoughtful multimedia integration.

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 aided in the ideation, planning, or debugging phases of your work.

Your Steps:

  1. Theme and Storyline Ideation: Choose 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. Enrich each marker with media like images, text, or audio clips.
  3. Consultation with ChatGPT: Refine your storyline and technical plan using ChatGPT to ensure feasibility with the Mapbox API.
  4. Map and Script Planning: Plan Mapbox styles and JavaScript functions, such as setting markers, customizing popups, and integrating multimedia.
  5. Implementing JavaScript and Mapbox API: Start coding and ensure your HTML supports map and narrative elements. Use ChatGPT for coding help.
  6. Testing and Debugging: Test your map thoroughly, focusing on interactive features and multimedia playback.
  7. CSS Styling: Apply CSS for a design that enhances the narrative experience.
  8. Integration Statement: Comment your script steps and describe ChatGPT’s role in your project.
  9. Final Submission: Place index.html in a folder called map, validate your HTML and CSS, upload the project to the server, and submit the URL.

Suggested Innovative Map Ideas:

  • Personal Travel Story: Map a vacation or event and use media to tell the story.
  • Historical Journey: Map key events of a historical expedition with period imagery and documents.
  • Literary Pilgrimage: Map locations featured in a novel or an author’s life, with excerpts or audio readings.
  • Environmental Impact: Highlight climate change effects or conservation efforts using before-and-after imagery.
  • Cultural Exploration: Map music, cuisine, or art from different cultures with samples at each location.
  • Interactive Fiction: Create a fictional narrative where user choices at markers influence the story’s outcome.