Как сделать веб-карту, сохранить здоровье и...

Как сделать веб-карту, сохранить здоровье и возненавидеть IE

Что будет

• Зачем мы это начали делать • Где взять данные для карты • Как нарисовать карту, хранить и отдавать

пользователям • Как сделать карту интерактивной• Как прикрутить маркеры, полигоны, балуны• Панорамы улиц, роутинг, 3D и мобильные

карты• Что делать если вдруг проблемы

ДубльГИС Путь самурая

Было в 2005

Стало в 2009

Ясно, вы молодцы!Давай с начала и по порядку

Где взять данные для карты?

OpenStreetMap

Как? Это же классный сервис для велосипедистов

• Напрямую фрагмент с сервиса, в форматах XML/картинка

• Скачать всю планету Planet.osm. Формат xml. Многогигабайт.

• Парсить самим ручками или через Osmosis

Но и провайдер данных

А есть что попроще?

CloudMade— товарищи из OpenStreetMap

• Planet.osm с разбивкой по странам с выделенными фичами

• Shape-файл с полигонами• TomTom POI• И многое другое…

Итак

Ну хорошо. А вы-то как?

А мы вот этими руками по космоснимкам с уточнением на местности

Мы тоже хотим своими руками

• GPS Mapedit• Mapedit++ (бесплатный)• MapInfo• ArcView• Panorama• И много чего ещё

Тогда вам в помощь

Как отрастеризовать карту?

Mapnik— бесплатная и компактная утилита

• Основной разработчик — наш соотечественник

• С++• Есть binding'и к Python

И это ещё не все!

GeoServer

Но за $

И тяжеловаты

Ну а мы пошли своим путем

• Компактное• Быстрое• Кросс-

платформенное• Понимает наш

внутренний формат

Решение получилось:

Вау, ну а если данных очень много?

Мощное железо!

Но!

• Дорого• Могут быть простои

«железки»• А если совмещать с

другими задачами, то тормоза во время растеризации

«Неожиданное» решение — облака

• Дешево• Быстро• Да и вообще —

прикольно ;)

Но они «облака» летают где-то над Европой

Чем наши офисные машины хуже?

Ничем.

Python+

Rpyc+

Py2exe+

Rasterizator =

Сервис растеризации

22 города • 5 офисных машин = 3 часа

А если надо весь мир, тогда что?

Как хранить тайлы?

По полочкам

— уровень масштабирования Z

— координата тайла X

— координата тайла Y

Как отдавать тайлы?

Через Nginx

Тайлы понятно, а обычные данные

где хранить?

Классика жанра, в СУДБ

MySQL +

PostgreSQL+

PostGIS

Так, тайлы на сервере, все по полочкам.

Что с клиентом?

VS

— зато там все есть

Что лучше?

— но свой родной

Мы за OpenLayers

• Открытый код• Хорошая документация• Активная разработка• Да и выбрать толком не из

чего :(

Давай уже интерактив: хотим масштабировать,

таскать и кликать куда попало

Желаете масштабировать?

OpenLayers.Map.zoomTo(уровень)

Желаете таскать?

OpenLayers.Map.panTo(координаты)

Желаете кликать?

OpenLayers.Map.events.register(тип события)

И ещё несметное количество всяких вкусностей, ммм...

Не хочу разбираться с OpenLayers.

Есть что проще?

Есть! Например, горячо любимые

• Ymaps.TileDataSource — тайловый слой

• YMaps.MapType — тип карты

• YMaps.CartesianCoordSystem / YMaps.GeoCoordSystem — система координат

• GtileLayerOverlay — тайловый слой

• GmapType — тип карты

Хочу показать на карте свой дом. Как?

Маркеры

Правда, тут не все так просто

Если объектов ≤ 100,тогда DOM-маркеры.

Обычные div-ки

Если 100 ≥ объектов ≥ 500,тогда SVG-маркеры.

Те, которые рисуются графическим движком

Если объектов ≥ 500,тогда тайловые-маркеры.

Те, которые рисуются на сервере и отдаются в виде

тайлов

Что так сложно-то?

Все бы делали как div, ну или на худой конец как SVG

Некоторым браузерам становится плохо

Сначала умирает

когда уже наконец-то и насовсем

Потом плохеет

он никогда не славился скоростью

Далее по списку

это вообще загадочное существо

Самый стойкий

Ave Google!

Матчасть повторили.

А как на практике?

В OpenLayers естьDOM и векторные (SVG)

маркеры.

В API Яндекс и Google только DOM

и ограничение сверху по количеству

А вы как боролись с≥ 500 маркеров?

Мы придумали их рисовать на сервере и отдавать виде

тайлов

Для этого на сервере сделали демона-

отрисовщика на С++

А на клиенте механизм трассировки тайловых

маркеров

Мы очень гордимся этим решением!

Демон

• 60 RPS• Две работающие сущности, если одной

поплохеет• Логирование, статистика, мониторинг• Может рисовать любые примитивы• Работает на базе нашего родного рендера

Клиент

• Не более 50% от CPU при трассировке• Может работать с любыми примитивами• Как компонента OpenLayers

С этим ясно.Хочу нарисовать маршрут

от дома до работы.

Пожалуйста,графические примитивы:точки, линии, полигоны

В OpenLayers есть возможность рисовать

примитивы. Ура!

У товарищей по парте тоже…

Но, и тут не все так просто.Представим себе линию,

проходящую через весь город.

Умный SVG-рендер при крупных масштабах будет её выводить только в видимой

области карты.

Глупый VML-рендер будет пробовать её просчитывать

по всей длине, а это несколько десятков метров /

сотни тысяч пикселей.

Например, смотрим карту 800 х 600 px, а линия у нас от

подвала и до крыши с голубями.

А какой браузер у нас использует VML?

Правильно!

когда же уже наконец

А балун, он же бабл, он же информационное окно?

Конечно же есть в OpenLayers, API Яндекса и Гугла.

Кстати, в OpenLayers балунов можно создавать сколько

угодно.

Все это прошлый век, сейчас модно панорамы улиц, поиск

проезда, 3D и мобильные карты.

С этим как?

Панорамы улиц

• Специальный плеер: обычно это Adobe Flash, бывает Java Applet или QuickTime

• Терабайты панорамных фоток с геопривязкой

• Автоматизированный комплекс для сбора информации. Обычно это велосипед/машина с установленной камерой и компьютером в багажнике

Поиск проезда

• Граф дорожной сети• Механизм поиска оптимального маршрута

по графу — демон (высокие нагрузки) • А на клиенте у нас есть OpenLayers с

линиями, маркерами и балунами

(Псевдо) 3D

• Добываем для зданий на картах z-компоненту (высоту)

• Не забываем, что здания могут налезать друг на друга — думаем как при этом сделать идентификацию

• Растеризуем здания на тайлах в псевдо 3D виде

• А дальше все также как и для 2D

Мобильные карты

• Толстый клиент, обычно Java2ME• Меньший размер тайлов, т.к. экран

мелкий. Обычно 64 х 64 px.• Все тяжелые операции делаем на

сервере, т.к. ограниченные ресурсы• На чистом мобильном браузере сделать

почти нереально

Проблемы с сервером

• Frontend — Backend• Тяжелые операции в очередь и/или на демонов• База данных: пространственные индексы,

шардинг, кластеризация• Тайлы только Nginx: конфиг без регулярок,

emptygif• Кеш

Проблемы с клиентом

• Framework не панацея — тяжелые методы напильником

• Много маркеров — пусть делает сервер• Выборка из хеша в разы быстрее массива• Паттерн фасад это наше все — без костылей не

обойтись• Выбор оптимального рендера для каждого

браузера• Тайлы по разным доменам

Проблемы с сетью

20К (размер тайла) * 20 тайлов * 5 операций = 2М за сеанс• Оптимизация png• Кеширование на клиенте всего, но разумно• Опережающая загрузка данных: буфер для

тайлов, html/json• Сжатие и объединение клиентской динамики: js,

css, html/json• AJAX, итак понятно ;)

Технологии + команда

• PHP + MySQL + PostgreSQL + (C++) + VBA + Python

• Nginx + Memcache + Sphinx

• Состав: 4 php + 2 (c++) + 2 vba + 2 qa + 1 sysadm + 1 ui + 1 pm

• Работаем по Scrum • Хотите к нам?

Слайд про здоровье

• Каждый день в 11.00 зарядка в виде standup meeting’а

• После каждого спринта русский team building• Дартс для профилактики туннельного синдрома• Нескончаемые плюшки для здорового

пищеварения

• Если болеем, то только за ВК Локомотив

Ссылки на картинкиhttp://joshhighland.com/blog/2009/07/21/internet-explorer-6-must-die/http://mindfulmom.com/2009/06/08/pushme-pullyou/http://janeheller.mlblogs.com/archives/2009/08/http://uniquetraveldestinations.wordpress.com/2009/10/16/color-me-pretty-hotels-are-going-the-http://www.bostonherald.com/blogs/sports/rap_sheet/wp-http://rexmen.ru/index.php?cstart=8&do=membershttp://www.photosight.ru/photos/682635/?from_memberhttp://www.progs.kiev.ua/publics/1843http://www.eroshka.ru/e107_plugins/forum/forum_viewtopic.php?9.lasthttp://protomodel.ucoz.ru/load/1-1-0-2http://etu3332.narod.ru/ready/http://pitachog.ru/print:page,1,675-supergeroi-39-foto.htmlhttp://omskpress.ru/tags/трасса/http://www.v3toys.ru/index.php?manufacturersort=-1&page=1http://www.forum-grad.ru/den-vseh-vlyublennih/25434-golubi-nerazluchniki-simvol-dnya-svyatogo-valentina.htmlhttp://latimesblogs.latimes.com/washington/images/2008/10/22/southpark.jpghttp://www.independentvoice.com/http://volfenstein.splinder.com/http://www.topwork.com.ua/front/article/doc/241http://www.liveinternet.ru/users/1216183/http://www.simpsoncrazy.com/content/pictures/homer/HomerSimpson42.gif

Артём Кудзев

— kad@2gis.ru— @kudzev— +7 913 951 06 18