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 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:
- 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
- For fixed body heights (no overflow) add html, body { height: 100%; overflow: hidden }
- build the basics of the JavaScript (no effects or complex arrays) to make sure you have things functioning the way you want it.
- Add animation or transition effects using JS classList method with CSS transitions
- Add more markers, images, media, text and graphic elements
- 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- Testing and Debugging: Test your map extensively to ensure all elements function as intended. Pay special attention to interactive features and multimedia playback.
- CSS Styling: Apply CSS to style your site, focusing on a design that complements and enhances the narrative experience without distracting from the map.
- Integration Statement: In your source code comments, summarize the script steps in natural language and highlight how ChatGPT supported your project.
- 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.