Better coding can transform swift offline maps

Offline maps represent a number of different user challenges. Getting more strategic about coding can alleviate that stress and improve results.

In brief

• Swift offline maps can be hard for users to navigate.
• Taking a different coding approach can improve user experiences, keep people engaged and deepen relationships.

The next map has been zoomed in four times, and you need a lot more tiles to represent this area:

I did my research for developing an iOS application, but you can find similar Android tools and update the code to get the same result for an Android application.

Step 1: Add MapKit

Using a tool such as Apple’s Xcode, add a MapKit element as you normally would when developing an iOS application.

Step 2: Get map tiles

Override the renderer to get the tiles from OpenStreetMaps:

Step 3: Determine points of interest

Each tile takes up about 80 to 100 kb of space. Since the MyRangeBC app only deals with very specific parts of BC, I didn’t deem it necessary to have all of the tiles for all of BC. That would have resulted in a few GB of data. Instead, I went on and determined the longitude and latitude for points of interests only.

As part of this I also decided that the MyRangeBC application will only need access to certain tiles that are not fully zoomed in, since the use case is mostly for pastures and such. Essentially, we won’t need to zoom in as far as street level for our points of interest.

Step 4: Step 4: Convert point of interest long/lat

Each tile has a unique X, Y and Z value. Z is the zoom level, while X and Y determine the specific tile. For the app to get the correct map tile, you need to use the following code to convert the longitude and latitude data into the X, Y, Z schema.

If you know how many tiles you need ahead of time, you can easily figure out how much space your offline map will require. Simply take the total number of tiles you require and multiply it by 100KB.

Step 5: Download/cache map tiles

Next, you want to get the map tiles so that they are available when the app is launched.

You can also add code that checks whether the map tile has previously been downloaded.

Make sure to store the png map tiles with a specific naming pattern so you can easily fetch them in step 2 (e.g., tile-x-y-z.png).

While we haven’t yet implemented this code in the current version of the MyRangeBC application, I can definitely see the use of it in future versions. I think the downloading of map tiles will be especially very helpful for rangers that are in areas without internet connectivity.