Week 7: MapBox API

To Do This Week:

E-lit Projects (DUE Wednesday, Oct 8th) 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.
Include logic steps, comments on AI and url to your chat.

Intro: GitHub CoPilot

Optional switch to use the professional developer workspace combining CoPilot and GitHub

Map Story (15%)

DUE October 22

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.
List the logic steps for your JavaScript. You can work with JS Mentor for this, but will be working also with block of code in the API examples.
Include comments within the script as well to show your understanding.
Link to chats used to develop your project.

Your Steps:

Explore the MapBox API: What is possible? What are the interactive map techniques you want to work with?
Theme and Storyline Ideation: Select a theme for your map-based narrative, such as a personal journey, historical exploration, or fictional adventure.
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?
Consultation with ChatGPT: Use ChatGPT to refine your storyline and ensure the technical feasibility of your plan with the Mapbox API and JavaScript.
Interactive Design: Plan the Mapbox styles, the layout, JavaScript functions needed, including marker placement, customized popups, and multimedia integration.
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.
Testing and Debugging: Test your map thoroughly, paying close attention to interactive features and multimedia playback.
CSS Styling: Apply CSS to complement your narrative, ensuring the design enhances the storytelling experience.
Integration Statement: In your source code comments, summarize your JavaScript steps and highlight ChatGPT’s role in your project.
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:

Open Google Maps and search for a place.
Right-click on the map and select “What’s Here?”
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:

Some Mapbox Examples

Design & Development Process:

Choose a theme for your map-based narrative, such as a personal journey, historical exploration, or fictional adventure.
Research MapBox API. What is possible?
Sketch or storyboard the interaction of YOUR map. What is the best way to experience your map theme?
Gather geolocations on Google Maps (right/control click to get long/lat and remember to reverse for MapBox.
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.For fixed body heights (no overflow), add the following CSS:
```
html, body {
  height: 100%;
  overflow: hidden;
}
```
Plan the JavaScript steps for what you need. Keep it simple, but be detailed. Don't list features of the map interface. Think sequentially. To start you need a Geojson to hold necessary info, you need variables, etc.Then you need to think about what happens when the user interacts. What has to happen? What functions do you need?
Build the very basics of the JavaScript (no effects or complex arrays) to ensure functionality. Try starting with just 3 locations.
Add animations or transition effects using the classList method with CSS Animations or CSS transitions.
Add more markers, images, media, text, and graphic elements.
Complete CSS design for visual hierarchy.
Test/Troubleshoot