Using Stamen and MapBox tilesets as basemaps in ArcGIS.com

In his recent blog entry Adding tile layers to your web map, Chris Whitmore explained how the March 2013 enhancement to ArcGIS Online supported the addition of a range of new file types to web maps. Chris described the approach of adding tile layers to web maps which allows you to use web-accessible map tiles from a server directly using a URL request from the browser. In this blog entry I show you how this approach can be used to integrate Stamen and MapBox tilesets in your ArcGIS Online web maps.

A map tileset is simply a set of images stored on a web server which can be accessed directly. Since tilesets are not referenced as a service, the key to adding them to your web map is to know the URL of the tileset you want to use. Most tilesets will follow the same standard so that the URL ends in /{z}/{x}/{y}/.[image format] where {z} is the zoom level parameter, {x} is the x coordinate parameter and {y} is the y coordinate parameter. Chris used the OpenCycleMaptileset which illustrates the standard URL array:

http://{subDomain}.tile.opencyclemap.org/cycle/{level}/{col}/{row}.png

In order to use a tileset from another provider in ArcGIS Online you first need to discover the URL for the tileset you want to use. Sometimes the provider will publish the URL on their web site, like Stamen. Alternatively, with a little exploratory work you can discover the URL from the web browser. Let’s see how this works with Stamen’s Watercolor tileset.

Step 1. Load the original map viewer. Stamen Watercolor is at maps.stamen.com/watercolor

Step 2. Right-click in the browser window and select Inspect element

Step 3. Select the Resources tab and then navigate to the folder that contains the individual tiles and select a tile file

The individual tile will contain the URL in the standard format. Note it down. This is what you will need in order to use the tileset in ArcGIS Online.

In the example above, you’ll notice that the sub domain is <a>. If you explore some of the other images in the folder you’ll likely find other sub domains used (e.g. b, c, d). These are simply the sub domain location for the particular tile with the complete tileset shared across multiple servers.

So the Stamen Watercolor tileset URL information you require is:

http://{subDomain}.tile.stamen.com/watercolor/{level}/{col}/{row}.jpg

sub domains a, b, c, d

Now you’re ready to add Stamen’s Watercolor tileset into ArcGIS Online using the Add Layer from Web option that Chris outlined in his blog. The Add Layer from Web dialog box should look like this:

Note that the credits information is completed fully. It is important to ensure that you abide by the terms of service of the original tileset provider and give proper attribution. If you are in any doubt as to the attribution required, contact the original tileset provider.

You can either build your own web maps using this method or, alternatively, the Stamen Watercolor, Toner and Terrain tilsets are all available in the Stamen basemaps group on ArcGIS online.

It is also permissible to publish any custom maps from your MapBox account in ArcGIS Online.  The process is the same, except the URL must reference your MapBox account and the Map ID. Let’s say my MapBox  username is <kennethfield> and the Map ID I want to use is <b34d0wdj>, then the URL and sub domain information I require to add a tileset into ArcGIS Online is as follows:

http://{subdomain}.tiles.mapbox.com/v3/kennethfield.map-b34d0wdj/{level}/{col}/{row}.png

sub domains a, b, c, d

Attribution for MapBox tilesets: Data © OpenStreetMap contributors. Design © MapBox.

An example Mapbox tileset used as an ArcGIS Online basemap inside an Application template can be seen here

Adding tile layers from other providers gives you even more flexibility in styling your ArcGIS Online web maps. In addition to Esri basemaps, you can now make use of the free basemaps from Stamen. You may also have authored and published maps using MapBox and TileMill which you can now reference in ArcGIS Online web maps as an alternative basemap. This gives you considerable flexiblity in styling your basemaps and ensuring they suit the purpose of the map theme or story you are illustrating. Get creative!