Creating offline maps for iOS applications

Good time, dear Habrovchane!

In this article I will talk about how to implement offline maps.
')
Disclaimer The article is not PR for anything. This implementation was chosen by me as the most optimal one and I would like to tell about it in an accessible form.
Thank!

Prehistory

When developing the application guide for Hong Kong, there was a need to use offline maps. Google maps, unfortunately, does not provide such an opportunity, so, because of despair, I had to use a service like MapBox, or rather an extension for iOS — MapBox-ios-sdk.

Interested please under the cat.

Install the necessary software

We will need:

Postgres.app
OSM Bright
osm2pgsql
TileMill.app

Download and configure Postgres.app

Download the application off. Site , unpack, move to the folder with the applications.
Next, run it.

The app welcomes us with this window.
Click "Open psql":

Or open through the status bar:

After these steps, the console will open with running PostgreSQL. Next we need to create a base for storing tiles.
In the console, enter the following:

create database osm: \connect osm create extension postgis; \quit

OSM Bright Download

Download the OSM Bright package from this link.

Unzip and open the folder, rename the configure.py.sample file to configure.py, open this file in a text editor, and change the fields (if needed).

I advise nevertheless to do this so that in the future there is no confusion with the projects.

So, changing the name, I indicated HongKong.

Left directory by default. This directory is used by the TileMill application, it is better not to change it, so as not to bother with TileMill.

The username and password, as well as all other fields are left blank.

Next we need to download the style files for our map.
They are here:

After downloading, mix them into the OSM Bright folder.
You do not need to unpack files. OSM Bright will do it yourself.

Download and install osm2pgsql

Download the link , emulate the image and install osm2pgsql.

Download TileMill.app

Go to the site and download it , with the subsequent transfer of the application to the application directory.

Card loading

Before creating an offline map, we must determine its size. The card should not be too big, because the weight of the application will be more than 1-2 GB, which I think is not acceptable.

Users who use the iPhone 16gb will be very disappointed.

Go to any of the following services.
I downloaded the map from metro.teczno.com.

We find our city and download the file with the .osm.pbf extension:

Conversion

osm2pgsql

Open the "Terminal" and write.

 osm2pgsql -cGs -d osm -S /usr/local/share/osm2pgsql/default.style ~/Downloads/<your_map>.osm.pbf

Description of the parameters can be viewed on the OpenStreetMap wiki.wiki.openstreetmap.org/wiki/Osm2pgsql , or set up a command in the terminal

 osm2pgsql --help

We are waiting for the osm2pgsql package to process the map and transfer it to the Postgres database.
Usually it is 5-20 minutes, depending on the size of the file.

At the end you will see an inscription like this “Osm2pgsql took 71s overall”.

OSM Bright

Now we have to create a project for the TileMill application.
Go to the folder c OSM Bright.

 cd ~/Downloads/mapbox-osm-bright

And run the script.

 ./make.py

Create offline maps

Open the TileMill.app application.

Attention! Possible bug. It lies in the fact that if the Postgres application is open during the launch of TileMill, the TileMill application does not open and is constantly in the download state. (It is treated by rebooting the computer).

If everything was done correctly, the project will be displayed in the TileMill application.

Run Postgres if closed, and open the project.

Click on “Export” and choose the MBTiles format.

Expose Zoom, for example, I set the 10-14 and immediately mark the center point for the minimum zoom.
If you do something wrong, the application will inform you about it.
Select the desired area.
And click "Export".

Converting and compressing a card can take quite a lot of time, from 10 minutes to a month, a year.
It all depends on the power of your Mac and the area of the map you are compressing. The recommended zoom for a card in a real project, 11-16, compression on my MacBook Pro 13, mid 2012 takes 30-40 minutes.

After processing, the program will offer to save the file.

Save!

Map integration into the application

We connect MapBox-ios-sdk using Cocoa-Pods, if that, the SDK is here . I recommend using the "develop" branch, because this version is already connected updated
SMCalloutView 2.0, which contains iOS 7 style.

Podfile

platform: ios, '7.0'

pod 'Mapbox',: git => 'https://github.com/mapbox/mapbox-ios-sdk.git',: branch => 'develop'

We transfer the map created in TileMill to the project resources.

And add a map to the main view.

ViewController.m

 @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; RMMBTilesSource *offlineSource = [[RMMBTilesSource alloc] initWithTileSetResource:@"HongKong" ofType:@"mbtiles"]; RMMapView *mapView = [[RMMapView alloc] initWithFrame:[self view].bounds andTilesource:offlineSource]; [mapView setZoom:11]; [mapView setMinZoom:11]; [mapView setMaxZoom:14]; [mapView setCenterCoordinate:CLLocationCoordinate2DMake(22.327330,114.123419)]; //  MapBox     . =) [mapView setShowLogoBug:NO]; [mapView setHideAttribution:YES]; [mapView setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)]; // Retina Display [mapView setAdjustTilesForRetinaDisplay:YES]; [self.view addSubview:mapView]; } @end