Accessing styled tiles on your map

We can use Mapbox services to fetch specific tiles from the service. To do so, we will use the GET HTTP verb to request the tile from Mapbox servers.

The advantage with REST GET requests is that you don't even need special tools or knowledge to call them.

I will present four methods that do not require coding, are easy to use, and will help us get through the chapter.

How to do it…

Here are the four ways:

• Copy and paste the URL in your browser: Yes, as simple as that! You can simply paste the URL in the web browser, and it will automatically perform the request for you. Although, it's not generally recommended to do it this way; I highly recommend that you use a specialized tool for this task from the ones mentioned in the following points.
• Use a third-party online tool: You can also use a third-party online tool, such as https://www.hurl.it/, to do REST calls.
• Use a browser extension: For Chrome, I suggest PostMan, which can be found at https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en:
  

  For Firefox, you may use the RestClient plugin, which can be found at https://addons.mozilla.org/en-US/firefox/addon/restclient/.

• Use a native OS app: For OS X, Paw by Lucky Marmot is an excellent choice, and you can get this at https://luckymarmot.com/paw:
  

  For a Windows system, you can try Fiddler from http://www.telerik.com/download/fiddler.

How it works…

Let's dissect the following URL to better understand what goes on by examining each parameter:

http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.{format}?access_token=<your access token>

• http://api.tiles.mapbox.com: All requests to Mapbox services must begin with http://api or https://api; then, we tell the services that we are interested in fetching inpidual .tiles.
• v4: This is the version number of the API. This ensures that your app doesn't break if the Mapbox team updates the API.

  Note

  Mapbox services is an API, and APIs often change or improve. Changing an API directly is not an option as it breaks every app out there that uses the changed function(s).

  The way it happens is usually by creating a new version of the API. Mapbox, at this moment, is at version 4, so apps that use a lower version don't need to be modified if they do not want to take advantage of the API functionality provided in the newer version. We will use the fourth version of their API for the examples in this book, which is the latest available at the moment.

• {MapID}: Replace this parameter with your Map ID. Each map has a unique Map ID that needs to be referenced here in order to access our styled tiles.
• /z/x/y/: These are integers with the coordinates of the specific tile. They are not latitude and longitude coordinates (which are two doubles, anyway), but these are coordinates based on the XYZ tiling scheme. The z parameter is the zoom level, while x and y are the tile numbers in the coordinate.

  Note

  A valid question at this point is how to get the x and y coordinates for the area you are interested in at a specific zoom level. There are numerous ways to convert latitude and longitude into the XYZ scheme.

  An excellent resource to get started is available at http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames. It explains the mathematical equations behind the XYZ tiling scheme, provides code to a huge variety of programming languages, and even scripts in Python and Ruby that convert latitude and longitude to XYZ.

  An easy, hassle-free way is to use the online tool at http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/.

• {format}: You can choose the format of the tiles. Acceptable formats are PNG, from 16 colors to 256 colors, and JPG, with compression levels 60, 70, and 80n. The format can be prefixed with @2x for retina display.

  Note

  By retina display, we mean the high resolution screens of mobile (and most recently desktop) devices, such as the iPhone. The retina term was introduced back in 2010 with the release of iPhone 4, in which the device display had a resolution of 640 x 960 pixels and a pixel density of 326 ppi (pixels per inch).

  A screen this small in size and, at the same time, so dense in pixels, required special attention from developers. If an image with the original resolution is displayed on this screen as is, it will appear very small, and if it's scaled up at double size without doubling the number of pixels, it will appear jagged or blurry.

  For optimal results, developers needed to supply the image in two different resolutions: the native (@1x) one and one that has twice the number of pixels or is double the size (@2x). The OS frameworks at runtime chose which resolution was appropriate for the specific display to ensure optimal quality. Retina screens are not limited to mobile devices; several laptops and screens from Apple and other manufacturers offer retina display.

  Our tiles are simply images, and displaying these images in retina display would introduce the same issues.

• access_token=<your access token>: Finally, you need to supply your access token.

Now that you have understood how the GET request works, we can easily try it on a web browser. Build the URL by replacing the Map ID with the one of the map you plan to display and the access token with your own.

There's more…

Fetching a single tile

Fetching a single tile requires the following steps to be performed:

1. Find the tile you are interested in fetching.
2. Construct the HTTP GET request by providing the Map ID, tile, format, and access token; for example, consider the following URL:

   http://api.tiles.mapbox.com/v4/nimrod7.k4adg5mg/6/31/20.png?access_token=pk.eyJ1Ijoibmltcm9kNyIsImEiOiJkNkw1WWRnIn0.pnQn9P2nbHyhKf2FY_XJog

3. Paste this URL in the browser or in a REST client.