Integration of Offline Maps in iOS .

Posted in: Blog

Offline maps allow a user to access an important map regardless of Internet availability. Our aim was to render the pre-stored maps for the user so they can view them in offline mode. The purpose of our research was to produce a map in a specific format and look for a rendering engine that could use those pre-stored map files for user viewing.
The Following tools and SDKS were used to achieve our goal:

1- TileMill
2- MapBox SDK 1.6
3- Postgres
4- OpenStreetMap ( OSM-Bright)

Here are the steps you need to follow in order to integrate offline maps in iOS.
1) Install/Update your HomeBrew:-
The first step is to make sure that you have the latest version of HomeBrew on your Mac. HomeBrew is a dependency manager for Mac that provides seamless installation of some well-known frameworks. To update your version of ‘HomeBrew’ open the terminal and type in the following command:
brew update
2) Install the Postgres & PostGis extension:-

Once you have updated your ‘HomeBrew’ you can now proceed with the installation of Postgres and PostGis extension. To install the PostGres you can follow either one of the two methods.
– Install Posgres through its online available installer.
OR
– Open the terminal and type in the following command:
brew install postgresql
Once the installation of Postgres is complete, you are ready to install the PostGis. Begin by installing the dependencies of first, in the window type in the following command:
brew install libpng && brew link -f libpng
Then install the PostGis itself by using the following command:
brew install postgis

3) Database initialization:-
You then need to initialize the database using the commands below:

initdb /usr/local/var/postgres -E utf8

createdb `whoami` # This command creates a database against your username.

Make sure that ‘which psql’ command is pointing to /usr/local/bin/psql
Then run the following commands one by one:
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start
psql -c “create database osm;”
psql -d osm -c “create extension postgis;”
Osm2pgsql (OpenStreetMap to PostGres) installation

This utility enables the user to map the open street map files into Postgres. Now, install it on your Mac type in the following command on your terminal:

brew install osm2pgsql

4) Get the Region Data

You will find data for various regions at http://download.geofabrik.de or https://mapzen.com/metro-extracts/ or http://metro.teczno.com/. You need to process this data and import it to your PostGIS database, to do so you need to download the osm.pbf file for your region in our case we used the osm file of Lahore, Pakistan.

After downloading the osm file put place it in the root of your Mac and type the following command in the terminal.

osm2pgsql -c -G -d osm -S /usr/local/share/osm2pgsql/default.style “YOURFILE.osm.pbf”

5) Install TileMill:-

TileMill is a map designing tool, developed by MapBox, that helps the user generate map tiles (of a specific city or region) for offline access.

The TileMill installation process is as follows

– Download the TileMill Developer Version from the list of releases, in our case we used “TileMill-v0.10.1-312-gfaf6910.zip”.
– Extract the downloaded zip file and keep the TileMill app in the Applications directory of your Mac.

6) Setting up OSM-Bright
OSM-Bright is the template for a TileMill project. Your next step is to download the polygons and shapes data to be used by the TileMill:
http://data.openstreetmapdata.com/simplified-land-polygons-complete-3857.zip

http://data.openstreetmapdata.com/land-polygons-split-3857.zip

While your files are being downloaded you can clone the osm-bright project to your system by following the steps below:
git clone git://github.com/mapbox/osm-bright.git
Make sure the Postgres server is running. In case it’s not running you can use the following command to run it.
pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start
Once the clone is complete and the shape files are downloaded , while PostGres is running, move into the project directory and find the file named “configure.py.sample”. Make a copy of the file in the same directory and rename the copy to just “configure.py”.
Now create a folder named shp, place the downloaded files in it and unzip the files.
Then head back to the terminal, enter the osm-bright directory and type the following command.

./make.py
The above command will run the script and setup your project at ~/Documents/MapBox/project/
7) Generating the MapTiles
You should be able to see your OSMBright project at the following directory ~/Documents/MapBox/project/
Now open up TileMill from your application and wait until it loads the projects once it is running completely.

Screen Shot 2016-01-28 at 4.28.08 PM

8) Collecting your map stills:

  • Edit the Project Settings by clicking the wrench icon at the top right.
  • Zoom in on your location (in this case the city of Lahore, Pakistan) and change the Center location and Bounds using the interface.

Screen Shot 2016-01-28 at 4.37.24 PM

  • Click save.
  • Select the Export Menu and click on MBTiles. Select a zoom range. The higher the range you use,

Screen Shot 2016-01-28 at 4.41.39 PM

the larger your database will be. Ranges between 0 and 16 worked best for our purposes.

  • Save the mbtiles file with a name like Lahore.mbtiles.
  • The export will be moved to ~/Documents/MapBox/export/ when complete.
  • Size of export depends upon the zoom level.

9) Rendering the Offline Maps

Now it’s time to wire up the pre-stored map into an iOS application.

  1. Create a new iOS Application and name it ‘Offline Maps’ – Single View Application will do for testing purposes.
  2. Download the following project from github https://github.com/mapbox/mapbox-ios-example
  3. Pull out the MapBox folder containing the SDK and other libraries from the downloaded application and keep it some place safe.
  4. Drag the copied MapBox folder into your newly created project and make sure that ‘Copy Items if needed’ is checked.
  5. Include the following Frameworks:

– Foundation.framework
– UIKit.framework
– CoreLocation.framework
– CoreGraphics.framework
– QuartzCore.framework
– libsqlite3.dylib

Screen Shot 2016-01-28 at 5.38.19 PM

 

libMapbox.a

Screen Shot 2016-01-28 at 5.38.33 PM

Include your offline map file in your project with ‘Copy Item if needed’ checked

Screen Shot 2016-01-28 at 5.43.45 PM

Add the -ObjC to the Other Linker Flag of the target.

Screen Shot 2016-01-28 at 5.44.30 PM

In AppDelegate.m, import “MapBox.h”

10- Add the following line in viewDidFinishLaunching of the AppDelegate:

[[RMConfiguration sharedInstance] setAccessToken:@“YOUR_API_KEY”];

11- Now in the ViewController.m import the “MapBox.h” and add the following code snippet in the viewDidLoad method:
self.title = @”Offline Maps”;

RMMBTilesSource *offlineSource = [[RMMBTilesSource alloc] initWithTileSetResource:@”Lahore_new” ofType:@”mbtiles”];

RMMapView *mapView = [[RMMapView alloc] initWithFrame:self.view.bounds andTilesource:offlineSource];

mapView.zoom = 2;
mapView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

mapView.adjustTilesForRetinaDisplay = YES;

[self.view addSubview:mapView];

12- Run the app in offline mode and wait for the magic to happen

Simulator Screen Shot 28-Jan-2016, 5.21.18 PM

2 thoughts on “Integration of Offline Maps in iOS

  1. okay, that was helping! (y)

    1. Happy to hear that 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *