0,0
рейтинг
23 июня 2014 в 14:26

Разработка → Создание оффлайн карты для iOS приложения из песочницы tutorial



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

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

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

Предыстория


При разработке гид приложения для Гонконга, возникла нужда в использовании оффлайн карт. 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 wiki.openstreetmap.org/wiki/Osm2pgsql, или прописать в терминале команду

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 => 'https://github.com/mapbox/mapbox-ios-sdk.git', :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



Проект с примером – github.com/Ne0nX/OfflineMaps-Example

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


www.mapbox.com/tilemill/docs/guides/osm-bright-mac-quickstart
github.com/mapbox/mapbox-ios-example

Спасибо что дочитали статью до конца.
Удачи вам!
Дмитрий Караченцов @Ne0nX
карма
3,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (7)

  • +1
    так сколько в итоге приложение весит?
    точнее интересуют именно тайлы
    • +3
      К сожалению много. Карта для Харькова весит около 120Мб (2/3 от всех возможных зумов). Карта Киева — около 230Мб. Mapbox вроде обещает поддержку векторных карт с аппаратным ускорением графики, но воз и нынче там.

      Еще имхо TileMill заметно стабильнее работает на винде, чем на маке. Возможно из-за того что у меня на винде 16 гиг оперативки, а на маке 8. Но вот запустить Postgress на винде ради карт еще тот гемор.
      • 0
        Вообще никаких проблем не было в запуске на Windows Postgre 9.3 + PostGIS. Поднял за несколько часов,
        потом пару суток на генерацию тайлов Москвы (Phenom II X6, 8ГБ оперативы)

        (не помню сколько там слоев, но размер итоговый 2.7 ГБ)
  • +1
    Терри Пратчетт тут не при чем…
  • 0
    Кстати на Android я попробовал вариант Google Maps v2 с его ITileProvider и MBTiles. Работает хорошо.
    Интересно, пройдет ли такой вариант на iOS
  • +2
    Замечу, что на metro.teczno.com выгрузки не обновляются (см. дату).
    Еженедельно обновляемый форк подняли MapZen.
  • +1
    Чтобы не заставлять людей читать всю инструкцию целиком, чтобы понять ближе к концу, что речь пойдет об еще одном варианте карты с растровыми тайлами в MBTiles, в двух словах об этом стоило сказать в самом начале.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.