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

To Do This Week:

Gather info and plan Mapbox projects.

Workshop

Elit projects

Notes:

  • 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 20

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 20

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.

 

 

 

 

 

 

To Do This Week:

Gather info and plan Mapbox projects.

Workshop

Elit projects 
Notes:

  • 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 set-up 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 20
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 to access map style

Objects, JSON and MapBox :
intro to JSON: javascript object notation, used for storing and exchanging data.
Mapbox-markers-example – Geojson 
Mapbox-markers-example-ZIP

Design & Development Process

Proceed methodically with this project:

  1. Using ChatGPT, create HTML and basic CSS with colored borders for the elements in the Map Project. Consider using CSS Grid or Flex or position-fixed to place elements
  2. For fixed body heights (no overflow) add html, body { height: 100%; overflow: hidden }
  3. build the basics of the JavaScript (no effects or complex arrays) to make sure you have things functioning the way you want it.
  4. Add animation or transition effects using JS 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 20

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 “map”. 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.