Map Story

Project #1 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.

———————————–

GET STARTED:

Sign-in to Mapbox. You will need an API access token to configure maps. Just follow instructions.

Mapbox GL JS API 

Mapbox GL JS examples

Mapbox blog

Mapbox Examples

CUSTOM STYLES:

Mapbox Styles reference

Mapbox Styles Gallery

Mapbox Studio to access map style

EXAMPLE MAP (with jQuery):

mapbox-markers-example

mapbox-markers-example.zip

How to get latitude and longitude for your map locations?

  1. Go to Google Maps.
  2. Search for a place.
  3. Control click any place on the map.
  4. 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.
  5. 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 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

 

 

Leave a Reply