WEEK 9: Objects
(March 3 & 5)

To Do This Week:

Work on Map Projects…

Module Notes

Review:

Objects and Classes:

Object Literal (simple object):

let dog = { 
   name: "Buddy", 
   breed: "Golden Retriever", 
   age: 3, 
   bark: function() { 
      console.log("Woof!"); 
   } 
};

Object Constructor (an abstract object to generate specific “instances” of a dog):

function Dog(name, breed, age) {
   this.name = name;
   this.breed = breed;
   this.age = age;
   this.bark = function() {
      console.log("Woof!");
   };
}

let myDog = new Dog("Buddy", "Golden Retriever", 3);

Instantiation of the Map object from the MapBox API:

let map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/mapbox/satellite-v9',
   center: [-119.262833, 46.329140], // starting position [lng, lat]
   zoom: 5 // starting zoom
});

Object Constructor (a template for creating multiple objects with similar properties and methods):

function Mealplanner(breakfast, lunch, dinner) {
   this.breakfast = breakfast;
   this.lunch = lunch;
   this.dinner = dinner;
   this.message = function() {
      alert("Animals feel. Don't eat them.");
   };
}

let myMeals = new Mealplanner("bagel", "soup", "chicken");

Classes (a more convenient way to write code that in pre-ES6 would be more complex or verbose):

class Dog { 
   constructor(name, breed, age) { 
      this.name = name; 
      this.breed = breed; 
      this.age = age; 
   } 
   bark() { 
      console.log("Woof!"); 
   } 
}

let myDog = new Dog("Buddy", "Golden Retriever", 3);

Maps Project Workshop

Map Projects List

Map Project DUE Monday March 19th

Grading Criteria:

  • Effort in scripting and utilizing the MapBox API.
  • Interaction design quality.
  • Visual hierarchy of elements.

Requirements:

  • Markers: Ensure your map contains a minimum of 5 markers.
  • Functional JavaScript: Verify that your Map’s JavaScript functions properly and is free of errors. Check the console for any issues.
  • User Experience: Design the map’s interaction with the user in mind. Ensure clarity and accessibility in interactions.
  • Color Scheme: Maintain a harmonious color scheme across the map and page elements.
  • Visual Hierarchy: Implement thoughtful typography and graphic elements with clear visual hierarchy.
  • Image Presentation: Ensure images are proportionally presented within the narrative.
  • Project Comments: Include brief comments in the <head> section using HTML comments about the API used (MapBox) and any additional resources such as ChatGPT.
  • JavaScript Comments: Add comments within your script to describe the purpose of JavaScript statements, regardless of whether you used ChatGPT.
  • Folder Structure: Upload your project in a folder named “map”, including the index.html file, external JavaScript file if applicable, and the images folder.
  • Submission Check: Before submission, verify that the project link works correctly. Submit the working URL to Canvas.
  • Communication for Delays: If you anticipate being late with your project submission, notify me via Slack beforehand with your expected completion time.