So, I tasked my Geog 521R Web Mapping class with building a custom interactive web map, including a custom basemap tile cache. In previous semesters, I had a virtual machine running ArcGIS Server, but it was always a beast to keep running reliably (without me spending all my time as a sysadmin). I had thought of using ArcGIS Online, but we were having trouble making it work for students. I had the students investigate several other GIS tile servers, including open source tools, but they weren’t impressed with any.
It occurred to me that since the standard tile cache structure, as developed by Google, mirrors a set of folders and files, why do I need any cache server at all? Yes, the servers are good for regenerating the tiles, compressing the tiles to take up less space, and delivering the tiles with high performance; but they create another layer of complexity that is too cumbersome for simple applications like what my students were doing (i.e., only a few hundred tiles). In other applications, I have had success using Tilemill to design a basemap (which saves it as a .mbtiles file) then using a custom tool I found on the Internet to explode it to a file cache. In this case, I wanted to let the students use ArcGIS to design the basemap without having to learn another program. So here’s what we did:
- Design a basemap in ArcMap, using the best practices suggested by Esri, such as scale-dependent data, symbology and labeling
- Share it as a tile package, saving it as a file, rather than uploading to ArcGIS Online
- Use the “Export Tile Cache” tool to an exploded cache. Remember to edit the area of interest, and save it to a place on a web server (yes, you need a web server with enough space for the cache)
- For some mysterious reason, Esri’s exploded cache structure has all the right folders and files with filenames representing the zoom, row, and column numbers, but it uses hexadecimal numbers like R00002fcd (WHY???)
Here is an example of the result for Zion National Park, using the landscape expression technique I describe below. Feel free to look at the source to see how the Leaflet function works.