Generating Custom Map Tiles

Roll your own map tiles for offline or static use in your apps. No, I'm not talking about screenshots of Google Maps and spit-balled boundary coordinates.

You know that feeling when you’re sure you’ve already spent more time looking for an existing solution than the time it would take to just build it yourself? Its pretty easy to detect the early signs of this when the existing solutions are unfamiliar monsters like ArcGIS and QGIS.

As it turns out, I’m no stranger to maps, so I created my own dev utility inside of an hour using the services and libraries I had already spun implementations for elsewhere.

The Problem With Poros

This morning I received a series of frantic text messages from a friend of mine. He’s on a boat off the south coast of Poros, on his way to start a 2-week underwater archeology survey which is planned to cover the entire coastline of the East half of the island, including Modi. His iOS app tracks any and all data collected throughout a survey, and uses the Objective-C Quartz Core CALayer and WGS84 datum to arrange custom aerial map tiles of the survey locations. The problem was that the dive team didn’t have the official digital maps with them, and of course no scanner to be able to make use of the paper ones.

Leaving him to generate his own tiles though, using his iPad alone, seemed like some form of cruel and unusual punishment.

The Dev Utility

You can find my code in this git repo: Mapbox Tile Grabber

Screenshot-MapboxTileGrabber.png

The Mapbox Tile Grabber uses Mapbox and Leaflet to generate and interact with the map.

The map image export is handled with Mapbox’s leaflet-image library. Its important to note that leaflet-image only generates PNG files; a request for JPG support is currently still an open issue. If you’re pulling satellite-style maps, you’ll want to manually post-process these into optimized JPGs because the PNG versions will be needlessly humongous.

Plan & Execute

At this point, I do have some leverage to titrate the pain valve. But the request for an annotated map seems more than reasonable.

Screenshot-TileSequence.jpg

With the Mapbox Tile Grabber, I was able to quickly generate the overlapping frames that covered the annotated areas (again, manually processed into optimized JPGs).

Screenshot-TileSequence.jpg

The Gods of Poros Approve

With the new map tiles in place, a team of Greek divers will be logging their findings on this secretly ad hoc backdrop.