WEEK 7: Objects, Geojson & MapBox
(February 20 & 22)

To Do This Week:

Gather info and build Mapbox projects.

Finish E-lit Projects.

Workshop

Elit projects (check that your project is linked on this site)

  • upload a folder called “elit”, first page is “index.html”
  • testing: Command (or Control for PC) + Option + J
    use console.log(variable) – to test results of variables inside the console 
  • add text in the head (commented out using <!– –>) describing how you used ChatGPT in the project
  • add your own comments (// or /*  */) to describe what is happing in your script. try to be clear about each stage of the script

Finish and Test E-lit Projects

Map Projects:

Map Projects List 

Map ideas:
Mapbox GL JS examples
Student maps: Fall 2019 | Spring 2020

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

Proceed methodically with this project:

  1. create a wireframe (colored borders are best) for the site
  2. build the basics of the script (no effects or complex arrays) to make sure you have thinks functtioning the way you want it
  3. Add animation or transition effects using JS classList method with CSS transitions
  4. Add CSS design, full arrays, images and content

 

Create a wireframe (colored borders are best) for the site

Using ChatGPT Create HTML and basic CSS with colored borders for the elements in the Map Project.

  • CSS Grid or Flex
  • Or position-fixed to place elements
  • For fixed body heights (no overflow) add html, body { height: 100%; overflow: hidden }

Notes:

Mapbox-markers-example –  map 
Mapbox-markers-example-ZIP

Object Literals:

let meal = {
   vegetable: "peppers",
   protein:  "chicken",
   carb: "rice",
   expression : function() {
        alert("buen provecho!");      
     }
   spicy: ["none", "mild", "medium", "hot"],
   country: {
       name: "Mexico";
       location: [lat, long];
     } 
}

meal.protein;  // returns "chicken"
meal.expression();  // returns alert box that says "buen provecho!"
meal.spicy[1]; // returns "mild"
meal.country.location[0]; //returns lat