# MapBox

# Static Map Images

Mapbox is a mapping service, similar to Google Maps. With it you can render dynamic maps, static map images, get directions, and even do reverse geocoding.

The simplest of these features is the rendering of static map images. In your HTML you can have an <img> element, which is styled with CSS. The src of the image will be a URL that points to the mapbox api and includes all the required information to generate and return the appropriate image.

Here is a sample URL: https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-122.4241,37.78,14.25,0,60/600x600?access_token=pk.eyJ1Ijoic3RldmVncmlmZml0aCIsImEiOiJja2pnamd1dHoyaDdvMnNuMG5mMmlieXdvIn0.KbiXqVd8ymvPhxBY-FzTTw

Here are the parts of the URL, in the required order:

Base URL: https://api.mapbox.com/styles/v1/mapbox/
Style: streets-v11, outdoors-v11, light-v10, dark-v10, or satellite-v9
/static/ this word must follow the style.
The next section is a series of comma separated values.
longitude
latitude
zoom level
bearing (compass direction)
pitch (viewing angle)
Then another string containing the width and height for he image.
- eg: /1000x600 would make an image 1000px wide and 600px high.
The final part is the query string, which has one parameter ?access-token=, follow by the token that you get when you register with MapBox.

# Get your Mapbox Account and Token

Dashboard to create public tokens (opens new window)

# Hybrid 4 - Mapbox Exercise

Here is the starter code for your exercise (opens new window)

And here is a screenshot of what the exercise will look like while working.

screenshot

You will edit the starter code to complete the functionality.

You will need to register with Mapbox for an account and an authorization token. This token will be needed in your code.

The functionality on the page is as follows:

A map with the user's current location appears when the page loads.
If the user changes the value in any of the dropdown lists - Zoom level, View Angle, or Map Style - then a new map image is rendered using those new settings.
If there is any error, an overlay and a modal message box should appear with details about the error.
Clicking on the overlay or the modal will make them disappear.

Each call to the Mapbox static map api needs to use all the proper values in the URL in the correct order, as explained above, to be able to render the new image.

Back to Hybrid exercises