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

To Do This Week:

Gather info and plan Mapbox projects.

Module Notes

Elit Projects DUE this Wed Feb 26

Elit project student list

  • Folder is “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 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.

Map Project: DUE March 19

Map project student list

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.

 

Student Map Projects:

Map Ideas:

Explore Mapbox GL JS examples.

Mapbox Styles:

Mapbox Styles Gallery | Mapbox Studio

Objects, JSON, and Mapbox:

 

Some Mapbox Examples

    1. Add a Clickable Marker: Learn how to add a marker to your map that responds to click events, displaying a popup with more information. 
      URL:Mapbox Docs
    2. Add Multiple Markers: Discover how to add multiple markers to your map using GeoJSON data, each with custom popups.
      URL:Mapbox Docs
    3. Add Custom Icons with Markers: Customize your map markers with unique icons to represent different types of data or points of interest.
      URL: Mapbox Docs
    4. Fly to a Location: Use the flyTo method to smoothly animate the map’s camera to a new location upon an event, such as a button click.
      URL: Mapbox Docs
    5. Display a Map on a Webpage: Initialize and display a basic Mapbox map within an HTML element on your webpage.URL: Mapbox Docs
    6. Add 3D Terrain to a Map: Enhance your map by incorporating 3D terrain using a raster terrain source for a more immersive visualization.
      URL: Mapbox Docs
    7. Display Navigation Directions: Utilize the Mapbox Directions API to show turn-by-turn driving directions on your map, offering interactive route guidance.
      URL: Mapbox Docs
    8. Create a Draggable Marker: Add markers to your map that users can drag to different locations, useful for selecting points of interest or destinations.
      URL: Mapbox Docs
    9. Add a Geocoder (Search) Control: Incorporate a search box into your map, allowing users to find and zoom to addresses or places using the Mapbox Geocoding API.
      URL: Mapbox Docs
    10. Animate a Point Along a Route: Create animations that move a point smoothly along a predefined route, simulating movement such as a vehicle traveling on a path.
      URL: Mapbox Docs
    11. Display Real-Time Data: Learn how to update your map dynamically with real-time data, such as live vehicle locations or sensor readings.
      URL: Mapbox Docs
    12. Cluster Point Data: Visualize large datasets by clustering point data, making your map more readable and interactive.
      URL: Mapbox Docs
    13. Filter Features Within Map View: Implement functionality to filter and display features that are within the current map view, enhancing performance and user experience.
      URL: Mapbox Docs
    14. Draw a Polygon: Allow users to draw polygons on the map, which can be used for area selection or highlighting regions.
      URL: Mapbox Docs
    15. Measure Distances: Implement a tool that lets users measure distances between points on the map, useful for planning and analysis.
      URL: Mapbox Docs

  2. 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

    WORKSHOP

    Discuss ideas…

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