Creating static images

Using Mapbox services, you can easily create static images in your map. Static images are useful because you may want to limit the user from exploring other areas. Plus, if this is the case, it will save bandwidth from your hosted Mapbox account.

How to do it…

Let's dissect the following Mapbox services request. Most of the request remains the same as the inpidual tiles' requests in the previous recipe. One important difference is that this time, we provide the latitude, longitude, and zoom level instead of inpidual tile numbers, as follows:

http://api.tiles.mapbox.com/v4/nimrod7.k4adg5mg/{lon},{lat},{z}/{width}x{height}.{format}?access_token=<your access token>

• {lon}: This is the longitude; coordinates range from -180 to 180 using a decimal separator.
• {lat}: This is the latitude; coordinates range from -85 to 85 using a decimal separator.
• {z}: This is the zoom level supported by them and integer ranging from 1 to 19.
• {width}: This is the image width in pixels. There are maximum 1280 pixels.
• {height}: This is the image's height in pixels. There are maximum 1280 pixels.

Creating the static map

To do this, perform the following steps:

1. Find the latitude and longitude. One way is to use the Mapbox Editor to navigate to the location you are interested in. The latitude and longitude are displayed at the bottom of the map.

   Another way is to use an online service, such as http://itouchmap.com/latlong.html. This gives you the latitude and longitude for a specific point.

2. Construct the HTTP GET request by providing the Map ID, tile, format, and access token.
3. Paste the URL in the browser or in a REST client:
   

Adding a marker

Mapbox offers the ability to add markers to your static maps. The format of the requests has to be similar to the following:

{size}-{icon}+{color}({lon},{lat})

Here are the parameters you need to know:

• {size}: This is the size of the marker. The value accepted in this parameter is pin-s for small, pin-m for medium, and pin-l for large markers.
• {icon}: This is the marker icon. You can choose from a variety of icons offered by Mapbox services.

  Note

  Check out the Maki icons to get an idea of which icons you can use on your markers from https://www.mapbox.com/maki/.

• {color}: This is the color value in hex format. It can be three or six digits.
• {lon}: This is the longitude.
• {lat}: This is the latitude.

The following are the steps you need to perform:

1. Construct the HTTP GET request as in the previous recipe.
2. Add the marker after {MapID}.
3. Paste the URL in the browser or in a REST client.

The complete request should look similar to the following example:

http://api.tiles.mapbox.com/v4/nimrod7.k4adg5mg/pin-l-danger+f00(-6.240,53.348)/-6.245079,53.344731,14/800x600.png?access_token=pk.eyJ1Ijoibmltcm9kNyIsImEiOiJkNkw1WWRnIn0.pnQn9P2nbHyhKf2FY_XJog