• Knowledge Base /
• iOS API Tutorials /
• Tutorial 7 — Extending Raster Tiles

Tutorial 7 — Extending Raster Tiles

Adding a new tile provider (in this case, MapBox's open aerial LandSat provider) to the BA3 Altus Mapping Engine

---

In early December 2012, MapBox's blog announced that MapBox had added LandSat tiles to its catalog of tiles in a project called Open Aerial. What if you would like to view this new tile set in the BA3 Altus Mapping Engine^™? Building off of the example code seen in Tutorial 6 we can easily extend the app to display LandSat tiles. We will also add another button, so that both LandSat and Street tiles are available to the user at the tap of a button. Here is what the app looks like when running:

Step 1

Let's first bring in the code for this tutorial and run it to see what this new app can do. If you have been working through all of the tutorials, type:

git checkout tutorial7

If this is your first time in the BA3 Altus Mapping Engine^™ Tutorials, do this instead to get started (see step 1 Tutorial 1 for details):

git clone https://github.com/ba3llc/BA3MappingEngineTutorials.git
cd BA3MappingEngineTutorials
git checkout tutorial7

Build and run the app. What you see is the default base map as described in Tutorial 1. If you tap the SM button, MapBox's Landcover tiles will appear as in Tutorial 6. If you tap the LSM button, MapBox's new LandSat tiles will start displaying. The GPS and Track-Up buttons work as described when we added them in Tutorial 4.

This is great, and the BA3 Altus Mapping Engine^™ is the only mapping engine in the world that can do this right now in a performant way. It turns out that adding the new LandSat tile set took just a few lines of code. Let's take a look at how it's done.

Step 2

We need a new tile provider class, so start by editing MEInternetTileProvider.h and add this line to the end of the file:

Step 3

Now go to the MEInternetTileProvider.m file and add this code to the bottom of the file:

This is a standard pattern for any MapBox tile set. The key thing here is getting the mapDomain attribute set up properly in the MEMapBoxLandSatTileProvider method. What we need is the "2k9d7u0c", which is a unique identifier that MapBox uses for its tile sets. Where do you get this value? In this case, go to the web page for MapBox's Open Aerial announcement using the Chrome browser. Right-click on any of the displayed tiles and choose "Inspect Element". You will see something like this:

We are looking for this kind of URL:

That is the place where the web page requests a specific tile from the MapBox tile server. Inside that URL is "2k9d7u0c", which is the unique identifier for the LandSat tile set. That's all we need. You can display any public MapBox tile set just as easily — simply extract the unique identifier for the tile set from a web page that displays the tile set and you are good to go.

Side note: If you would like the source code for an elegant little app that can display tile sets, go to the Description Page for the BA3 Altus Mapping Engine^™ and grab the code for the MapViz app. It can be easily modified to display these LandSat tiles as well.

Step 4

Now that the tile provider is set, we need to add the button that will make it visible in the app. You can find that code in ViewController.m, in the addButtons function:

The code for adding a simple button like this is described in Tutorial 4. Note that the ViewController.h file also has several new LandSat properties as expected.

Step 5

Now we need to add the function that gets called when the user taps the LSM button:

When the user taps the LSM button, the new layer for the LandSat tiles gets added at a zOrder of 4. That means that it will overlay streets at zOrder 3 (see Tutorial 6) and the base map at zOrder 1 (see Tutorial 1).

Step 6

One thing in this app that is less-than-elegant to some users is the fact that there is no clear indication that tiles have not yet loaded. We will clean up this detail with a gray grid in Tutorial 8.