[Из песочницы] Создание оффлайн карты для iOS приложения

Доброго времени, дорогие Хабровчане!

В этой статье я расскажу о том, как реализовать оффлайн карты.

Дисклеймер. Статья не является пиаром чего-либо. Данный вариант реализации был выбран мною как самый оптимальный и я бы хотел поведать о нем в доступной форме.

Спасибо!

Предыстория

При разработке гид приложения для Гонконга, возникла нужда в использовании оффлайн карт. Google карты, к сожалению, не предоставляют такой возможности, так что, из за безысходности пришлось использовать такой сервис как MapBox, точнее расширение для iOS — MapBox-ios-sdk.

Заинтересовавшихся прошу под кат.

Установка необходимого ПО

Нам понадобится:

• Postgres.app


• OSM-Bright


• osm2pgsql


• TileMill.app

Загрузка и настройка Postgres.app

Скачиваем приложение с офф. сайта, распаковываем, перемещаем в папку с приложениями.

Далее запускаем его.

Приложение приветствует нас вот таким окном.

Нажимаем «Open psql»:

Или открываем через статус бар:

После этих действий откроется консоль с запущенным PostgreSQL. Далее нам нужно создать базу для хранения тайлов.

В консоли вводим следующее:

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

Загрузка OSM Bright

Скачиваем пакет OSM Bright по этой ссылке.

Разархивируйте и откройте папку, переименуйте файл configure.py.sample в configure.py, откройте этот файл в текстовом редакторе и измените поля (если нужно).

Я советую все же сделать это, чтобы в дальнейшем не возникало путаницы с проектами.

Итак, меняем название, я указал HongKong.

Директорию оставил по умолчанию. Данную директорию использует приложение TileMill, лучше ее не менять, дабы потом не заморачиваться с TileMill.

Имя пользователя и пароль, а также все остальные поля оставляем пустыми.

Далее нам нужно скачать файлы стилей для нашей карты.

Они находятся тут:

После загрузки перемешаем их в папку OSM Bright.

Распаковывать файлы не нужно OSM Bright сделает это сам.

Загрузка и установка osm2pgsql

Скачиваем по ссылке, эмулируем образ и устанавливаем osm2pgsql.

Скачиваем TileMill.app

Переходим на сайт и качаем его, с последующей переноской приложения в каталог приложений.

Загрузка карты

Перед тем как создать оффлайн карту, мы должны определится с ее размером. Карта не должна быть слишком большой, т.к вес приложения будет больше 1-2 гб, что как мне кажется, не допустимо.

Пользователи которые используют iPhone 16gb будут очень разочарованы.

Переходим на любой из ниже перечисленных сервисов.

Я скачивал карту с metro.teczno.com.

Находим наш город и скачиваем файл с расширением .osm.pbf:

Конвертация

osm2pgsql

Открываем «Терминал» и пишем.

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

Описание параметров можете посмотреть в вики OpenStreetMap http://ift.tt/UTI8CC, или прописать в терминале команду

osm2pgsql --help

Ждем пока пакет osm2pgsql обработает карту и перенесет ее в базу Postgres.

Обычно это 5-20 минут, в зависимости от размера файла.

В конце вы увидите надпись вроде этой “Osm2pgsql took 71s overall”.

OSM Bright

Теперь мы должны создать проект для приложения TileMill.

Переходим в папку c OSM Bright.

cd ~/Downloads/mapbox-osm-bright

И запускаем скрипт.

./make.py

Создание offline карты

Открываем приложение TileMill.app.

Внимание! Возможен баг. Он заключается в том, что если приложение Postgres открыто во время запуска TileMill, то приложение TileMill не открывается и постоянно находится в состоянии загрузки. (Лечится перезагрузкой компьютера).

Если все было сделано верно, то проект отобразится в приложении TileMill.

Запускаем Postgres, если закрыт, и открываем проект.

Жмем на «Export» и выбираем формат MBTiles.

Выставляем Zoom, для примера я выставил 10-14 и сразу отмечаем центральную точку для минимального зума.

Если вы что-то сделаете не так как нужно, приложение сообщит вам об этом.

Выделяем выделяем нужную область.

И нажимаем «Export».

Преобразование и сжатие карты может занять довольно большое количество времени, от 10 мин до месяца, года.

Все зависит от мощностей вашего Mac и области карты которую вы сжимаете. Рекомендованный зум для карты в реальном проекте, 11-16, сжатие на моем MacBook Pro 13, mid 2012 занимает 30-40 мин.

После окончания обработки, программа предложит сохранить файл.

Сохраняем!

Интеграция карты в приложение

Подключаем MapBox-ios-sdk c помощью Cocoa-Pods, если что, SDK находится тут. Порекомендую использовать ветку «develop», т.к этой версии уже подключен обновленный

SMCalloutView 2.0, который содержит стиль iOS 7.

Podfile

platform :ios, '7.0'

pod 'Mapbox', :git => 'http://ift.tt/1nw6FvP', :branch => 'develop'

Переносим созданную в TileMill карту, в ресурсы проекта.

И добавляем карту на главный 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

Проект с примером – http://ift.tt/1nw6FvR

Ресурсы которые я использовал в процессе работы

http://ift.tt/1q0xZai

http://ift.tt/1nw6EIg

Спасибо что дочитали статью до конца.

Удачи вам!

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.