To Do This Week:
Assignment:
E-lit Projects are Due Feb 20th. Please upload in a folder called “elit”. Check that your link works here: Elit projects
Map Project
- Join and Explore the Mapbox API
- Get a token to start using the API
- Try to create a simple map
Class
Map Story – (10%)
Build a site using the Mapbox API . Create a map with at least 5 markers that tells a story about a place you visited, lived in, would like to visit or make fictional journey across different locations. Include images and text, video/audio (if needed) and a Mapbox map with javascript and interactive features with jQuery.
DUE Friday March 6th
Demo Talk:
MapBox – make a basic map
Intro: Objects, Object Literals and Geojson
GET STARTED:
Sign-in to Mapbox. You will need an API access token to configure maps. Just follow instructions.
CUSTOM STYLES:
Mapbox Studio to access map style
EXAMPLE MAP (with jQuery):
mapbox-markers-example | mapbox-markers-jQuery-example
How to get latitude and longitude for your map locations?
- Go to Google Maps.
- Search for a place.
- Control click any place on the map.
- In the pop-up, you will see “What’s Here?”. Click that and at the bottom of the page you will see that lat/long coordinates.
- Click this and the map will zoom to that location and at the top of the left sidebar you will be able to copy the lat/long
JavaScript Object Notation:
Intro to Objects – wait of Objects and Classes tutorial
intro to JSON: javascript object notation, used for storing and exchanging data.
*This class had previously used Google Maps API, but they now require a credit card. So I switched to the more elegant Mapbox API. It does not have the very cool Streetview capability.
Innovative Map Projects (for inspiration)
Student Examples
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
- Intro to Objects
- intro to JSON: javascript object notation, used for storing and exchanging data.
- Geojson
- mapbox-markers-example – reading/accessing the map data (geojson)
jQuery