Приветствую, хабровчане!

Поискав по Хабру, не нашёл подробных статей о таких сервисах как Layar и Locago. Если про Layar многие слышали или даже пользовались, то про Locago, думаю, не многие. Данные сервисы предназначены для отображения географических меток на карте. В случае Layar это карты от Google, а в Locago используются векторные карты. Не могу сказать, откуда у них карты, но, по крайней мере, в карте такого небольшого города как Тамбов я могу ориентироваться, и многие основные улицы и не очень показаны и названия отображаются на русском языке.

Я хотел немного рассказать о том, как делать слои для данных сервисов.

В данный момент приложение Layar доступно для iPhone и Android. Упор в этом приложении сделан на дополненную реальность. В то время как Locago это только карта с нанесёнными на неё метками. Locago ориентировано на обычные телефоны с java, чем и вызвано использование векторных карт. При работе, приложение центрирует карту в зависимости от меток, получаемых от сервера. Хотя приложение и может использовать GPS приёмник, но видимо это должен быть приемник, работающий через Bluetooth. На смартфоне эта функции не заработала. Нужно отметить, что приложение Locago платное и во время работы выскакивает рекламный баннер.

С чего начать?

И так для начала нужно зарегистрироваться на сайте Layar.com и получить доступ на разработку слоёв, для этого надо послать заявку по адресу http://layar.com/publishing, и через несколько дней вам пришлют инвайт. К сожалению быстрее ни как.

После получения инвайта заходим в профиль разработчика и жмём My layers -> Create a layer, далее настраиваем наш слой. В поле API endpoint URL можно ввести произвольный URL, потом его можно будет изменить на реальный. Во вкладке Сoverage необходимо выбрать страны которые будет покрывать ваш слой. А в Filters необходимо настроить фильтры. По умолчанию установлен фильтр диапазона отображения меток от вашего текущего местоположения. Минус в том, что нельзя передавать интерфейс фильтра в приложение динамически, как это можно сделать в Locago, а нужно настраивать его в профиле разработчика на сайте Layar. С другой стороны это повышает в некоторой степени защиту вашего контента, об этом я скажу несколько слов в конце.

Теперь о Locago. Опять же необходимо зарегистрироваться и более ничего не требуется. После можно сразу же добавить ваш слой в каталог сайта.

API Layar

API Layar представляет собой запрос (GetPOIs-Request) – ответ (GetPOIs-JSON Response). Как уже писалось выше существуют несколько версий API.

2.1	старая версия, поддерживающая все основные параметры
2.2	добавлена реализация действий с аудио и видео
3.0	добавлены 3D объекты, настраиваемые диапазоны(настройка радиуса), чекбоксы, поиск, пользовательская авторизация
3.1	добавлена поддержка платных слоёв
3.5	добавлены Layer Stream и анимационные текстуры в 3D объектах
4.0	добавлена возможность для взаимодействия со слоем. У меня не было такой задачи, поэтому подробно не разбирался с этой фичей, можно почитать тут

GetPOIs-Request

Параметров в запросе может быть довольно много. В разряд обязательных параметров, которые передаются с любым запросом и формируются самим приложением, входят идентификатор приложения, версия API, текущее местоположение, идентификатор кода страны и языка. К дополнительным параметрам можно отнести данные фильтров, информация об авторизации, которая производится посредствам OAuth.

GetPOIs-JSON Response

Скрипт должен посылать ответ в формате JSON. В ответе обязательно должны присутствовать такие параметры как имя слоя, массив POI (point of interest) и код ошибки. К необязательным параметрам относятся информация о наличии нескольких страниц (в случае, когда точек слишком много их можно разбивать на страницы), время обновления слоя, наличие действия (ссылка на мультимедиа-контент, информационный текст). Стоит отметить, что в клиентах Layar установлено ограничение на отображение количества точек, в Android – 90, iPhone – 100, для чего данные и разбиваются на несколько страниц. Данное действие лежит полностью на разработчике.

Теперь, что касается информации о POI, то здесь присутствует название точки, координаты точки (умноженные на 1000000), расстояние до точки и номер иконки, который мы должны загрузить в профиле слоя во вкладке Look&feel. Если мы в профиле установим версию API 2.1, то нам будут доступны только три иконки, поэтому в версии 3.0 количество используемых иконок стало не ограниченным. При первой загрузке слоя приложением, все иконки кешируются в памяти телефона, поэтому не стоит беспокоиться о большом трафике связанным с подкачкой всех иконок слоя. В дополнительных параметрах POI хранится короткая текстовая информация (например, адрес или наименование POI) и ссылка на фотографию, если она нужна.

Примеры по созданию простых слоёв. Руководство написано доходчиво с примерами на PHP, так, что вопросов возникнуть в принципе не должно.

API Locago

С Locago намного всё проще. Всё генерируется на стороне вашего сервера, как интерфейс фильтра, так и информация о метках. Здесь первым, что должно получить приложение при обращении к слою это главная страница слоя с расширением .idoc и именуемая файлом IDOC основанная на xml.

Вот пример такого документа

<?xml version="1.0" encoding="UTF-8"?> <idoc title="Bus68" icon="icon.png" >  <layer> <info>Информация о маршрутах автобусов</info> <symbolLayer name="Places" dataset="locago.php.igeo" webServiceFormat="igeo"> <categorySymbol value="0" symbol="0.png"/> <categorySymbol value="1" symbol="1.png"/> <categorySymbol value="2" symbol="2.png"/> </symbolLayer> <tag name="bus" /> </layer>  <style fontSize="12" fontStyle="bold" alignX="middle" >Автобусы</style> <br /> Показать только эти маршруты.<br /> <checkbox value="false" id="bus0" label="А 1 ком" /> <checkbox value="false" id="bus1" label="А 108" /> <checkbox value="false" id="bus2" label="А 14П" /> <br /> <style alignX="middle"> <button label="Показать" action="layer.load({sublayer:'Places', arg:{bus0:doc.fields.bus0.value, bus1:doc.fields.bus1.value, bus2:doc.fields.bus2.value }})" /> </style> </idoc> * This source code was highlighted with Source Code Highlighter.

Думаю можно с ходу понять какие теги за что отвечают. В атрибуте dataset тега symbolLayer указана страница отдающая приложению информацию о метках. А в атрибуте action тега button указываем какой слой загружать данной кнопкой sublayer:'Places', в случае, если слоёв на странице указано несколько, то можно разным кнопкам назначить разные слои и в arg прописываем какие параметры, мы передаём при запросе, в данном случае мы посылаем значения checkbox. В итоге у нас получится такого вида страничка

Приложению мы должны отдать XML в котором должны быть перечислены метки. Файл XML должен иметь в конце расширение .igeo и именуется IGEO. Вот пример файла IGEO:

<?xml version="1.0" encoding="UTF-8"?> <geodata> <Marker name="Restaurant Slussen" symbol="i:pinorange" x="18.071862" y="59.322227" text="A nice cosy restaurant.\ntel:+46555123" /> <Marker name="Bar Gamla stan" symbol="i:pinorange" x="18.070829" y="59.325035" text="redirect:1187768.idoc" /> </geodata> * This source code was highlighted with Source Code Highlighter.

Как видите здесь две метки, у каждой метки присутствует атрибут name, symbol – это ссылка на иконку или как показано в примере, метка определённого цвета, может иметь и другие значения, x, y координаты точки и text в который мы пишем поясняющий текст. Обратите внимание на атрибут text второй метки, здесь указана ссылка на файл idoc, то есть можно послать пользователя на страничку с более подробным описанием метки. Атрибут symbol можно заменить атрибутом category который будет указывать на определённую категорию, которой принадлежит метка. А категории необходимо объявить на главной странице idoc в тегах categorySymbol, как видите, в первом примере такие теги присутствуют и в них объявлены иконки, которые будут отображаться при присвоении метке какой-либо категории.

Пара слов о защите контента

Надо отметить, что при использовании Locago ваш контент весьма трудно защитить, я бы сказал, невозможно, так как все страницы хранятся на сервере и их можно открыть любым браузером, соответственно можно сгенерировать любой запрос. Поэтому отпарсить данные не составит ни какого труда. В Layar с этим несколько сложнее, так как мы не можем видеть какие запросы идут от самого приложения (конечно вопрос спорный и знающим людям не составит труда получить желаемое) и поэтому получить данные более проблематично. Вопрос о защите наверняка встанет у тех, кто сам вручную создавал базу меток.

Надеюсь статья будет кому-то полезна.

Делаем слои в Layar и Locago