Week 8: Object Literals, GeoJSON & MapBox

To Do This Week:

Module Notes

Elit Projects DUE this Wednesday morning (midterm grades are due Wed at 5pm)

• Name folder "elit", use "index.html", no uppercase letter or spaces!
• Always include a title, author name, and date on projects!
• If needed, include an explanation for interaction.
• Make sure your JS logic steps, description of AI use and chat urls arethe comments inside and at the beginning of the script.

Map Project: DUE Oct 22

Place index.html in a folder called map. Validate your HTML and CSS, text JS for errors. Submit a workimg URL in Canvas.

• js-demo-lesson3.html > Objects and Classes
• New mapbox-markers
• Download mapbox-markers ZIP
• Intro to JSON: JavaScript Object Notation, used for storing and exchanging data.

Mapbox’s New Pattern vs. Our Simpler Approach

• Recent Mapbox examples often begin with map.on('load', ...) followed by methods such as map.addSource() and map.addLayer().
• map.on('load') is an event listener that waits for the map’s style and data layers to fully load before running code.
• This is required when using addSource() and addLayer(), because those methods depend on Mapbox’s internal rendering system.
• In our simpler DOM-based method, we can add markers immediately after creating the map, so map.on('load') is not necessary.
• We will continue using:
  • forEach() to loop through GeoJSON data
  • new mapboxgl.Marker() to create markers
  • addEventListener() for interactivity
• This approach provides direct access to DOM elements, making it easier to understand how JavaScript connects data, elements, and events.
• If Mapbox documentation examples use map.on('load'), addSource(), or addLayer(), you can refactor them into this simpler form.

Refactoring Mapbox Examples with ChatGPT

• Mapbox documentation assumes use of the newer API methods.
• Use ChatGPT to refactor examples into accessible JavaScript for this course.
• Suggested prompt:

"Convert this Mapbox script to use forEach() loops, addEventListener(), and new mapboxgl.Marker() for markers instead of addSource() or addLayer(). Simplify the logic for beginning JavaScript students."

JS Mentor and the MapBox Poject

Start a session of JS Mentor with this prompt:

Can you help me with my MapBox GL JS API project? I want to make sure that my script uses forEach() loops, addEventListener(), and new mapboxgl.Marker() for markers instead of addSource() or addLayer(). Simplify the logic for beginning JavaScript students

MapBox Resources

Past Map Projects:

• https://dtc-wsuv.org/amelo20/map/
• https://dtc-wsuv.org/jnguyen23/map/
• https://dtc-wsuv.org/ashannon23/map/
• https://dtc-wsuv.org/sguo23/map/

Map Ideas:

Mapbox Styles:

Some Mapbox Examples

1. Adding a Simple Map
2. Add a Clickable Marker
3. Add Multiple Markers
4. Add Custom Icons with Markers
5. Fly to a Location
6. Display a Map on a Webpage
7. Add 3D Terrain to a Map
8. Display Navigation Directions
9. Create a Draggable Marker
10. Add a Geocoder (Search) Control
11. Animate a Point Along a Route
12. Display Real-Time Data
13. Cluster Point Data
14. Filter Features Within Map View
15. Draw a Polygon
16. Measure Distances

Design & Development Process:

1. Choose a theme for your map-based narrative, such as a personal journey, historical exploration, or fictional adventure.
2. Research MapBox API.  What is possible?
3. Sketch or storyboard the interaction of YOUR map. What is the best way to experience your map theme?
4. Gather geolocations on Google Maps (right/control click to get long/lat and remember to reverse for MapBox.
5. 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;
   }
   

6. 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?
7. Build the very basics of the JavaScript (no effects or complex arrays) to ensure functionality. Try starting with just 3 locations.
8. Add animations or transition effects using the classList method with CSS Animations or CSS transitions.
9. Add more markers, images, media, text, and graphic elements.
10. Complete CSS design for visual hierarchy.
11. Test/Troubleshoot

• Sketch interactive design
• generate HTML
• For next class, work out steps
• Optional workshop on Wed- this will focus on the JS steps and getting better at it!