Летом этого года ко мне обратился владелец одного сайта о ВОВ (Великой Отечественной Войне). У них на сайте была размещена карта на google maps api2. Покрытие google maps России их не устраивало, и они решили переделать карту на движок яндекса.

Первоначальная  идея была в том, чтобы написать обертку для GMAPS2 под YMAPS3. Промучавшись неделю стало понятно, что архитектура этих апи настолько разная, что тупо перебрасывать вызовы функций не получится. Значит, надо переписывать.

Весь сайт написан на самописном движке (в том числе форум), поэтому пришлось разбирать код 2006 года выпуска. Это было ужасно. Код ужасен. И не потому, что это чужой код, а потому, что в одной строке php кода может быть типа такого:

$_GLOBALS['result'] = ‘<a href=”‘.$url.’” onclick = “_gui.dosomething(‘.$param.’, \”param2\”)”>Жмяк</a>’;
То есть использование глобальных переменных, php-html-javacript в одной строке!

Классы? разделение php и html? упаси Господи шаблоны? –  не, не слышал. Например, два дня ушло на поиск бага. Оказалось, что в файле functions.php в СЕРЕДИНЕ!! между функциями есть прямой исполняемый код!

В результате работа заняла 3 месяца. Причем, если бы я писал все заново, то – не более 3 недель + неделя на баги. Код, написанный году в 2006 -2007, был настолько ужасен, что на его разбор ушло больше времени, чем на саму разработку. Более того, владелец сайта жестко установил, чтобы весь “дизайн” остался прежним и всякие мои попытки что-то изменить в пользу современного функционала мнговенно пресекались.

Функционал проекта

Наверное, это один из немногих проектов, где информация вводится, модерится, фильтруется и выводится не покидая карту.

Что мы имеем из функционала:

- добавление точек на карту и их описание

- каждая точка может быть отнесена к нескольким категориям (битовые флаги)

- в каждую точку можно подгрузить фотки

- каждую точку можно откомментить

- точки модерируется

- точки удаляются вместе с фотками и комментами

- фильтрация по категориям

- печать карты, печать выбранных точек

- контекстный поиск точек

Весь этот функционал реализуется на самой карте, без перезагрузки страницы или вывода модальных окон.

Контролы на карте все кастомные, функционал контролов спорный, но что-то изменить мне не дали.

Очень много времени ушло на фильтрацию и сам контрол фильтрации с кастомными скролбарами. Но все сложилось.

Архитектура:

Так как точек на карте было немного (600 шт.) и скорость роста проекта наверняка была бы меньше, чем скорость улучшения yandex api (что сейчас как раз и подтверждается – api стал работать быстрее, а точек почти не прибавилось), то я реализовывал коробочные функции yandex api3. Загрузка точек происходит единоразово ajax-ом и после этого точки больше не подгружаюся.

Если бы я стал делать этот проект с нуля, я, конечно, поставил бы backbone.js и все события прогонял через него. Но проект приходилось переделывать, поэтому, во избежание неожиданных конфликтов, я использовал только jquery из фреймворков.

В качестве менеджера событий для всего функционала я использовал менеджер событий карты map.events.

Например, кнопка “Изменить” в баллуне имеет класс “action” и атрибут data-action=”editobject”. Вешаем jquery на класс action и слушаем клик. По клику пробрасываем событие в map.events.fire(‘editobject’). Таким образом удалось сделать внятную архитектуру и навешивать фичи просто добавляя события и обработчики.

Контролы на карте:

Кнопки:

Кнопки на карте

“адрес” – геокодирование по контексту, либо переход по координатам

“ссылка” – ссылки на участок карты.

“печать” – вот тут пришлось попотеть. В результате получилось печатать карту с кластерами, метками и т.д. Подробнее о методе вы можете почитать в статье http://mapexpert.pro/?p=27

Контролы

контролы карты

Два кастомных контрола “Тип карты” и “Типы объектов” – с двуми режимами: обычный и “приколотый”. Во втором случае, контролы при потере фокуса становятся полупрозрачными и не исчезают с карты.

В “Типах” объектов использована доработанный плагин https://github.com/thomd/jquery-scroll .

Все изменения контролов пробрасываются в менеджер событий карты и там уже разбираются.

Сайдбар
Сайдбар
Сайдбар

Сайдбар “Список объектов” с пагинацией показывает список объектов в текущем вьюпорте. При клике на объект выводит малый баллун объекта.

Здесь возникла проблема – что делать, если объект, на который кликнули, находится в кластере? Решением стал показ временного маркера с баллуном, который удаляется после закрытия баллуна или клика на карте.

В сайдбаре находятся фильтры “Мои”, “Модер”, “Поиск” и “Карман”.

Плейсмарки.

Лейаут плейсмарков был переделан, хотя сам спрайт перестраивать не стал, так как он используется в остальном сайте.

Баллуны.

У плеймарков 2 типа баллунов – малый и большой. В малом отображается краткая инфа, а большой служит для всего остального.

Малый баллун

Большой баллун – это основной функционал: полная инфа об объекте, фотки, комменты + редактирование всего, загрузка фотографий, правка и удаление комментов, модерирование.

Большой баллун

 

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

Все грузится ajax’ом, в том числе фотки.

Добавление объектов

Добавление объектов сделано методом перетаскивания маркера на карту – что довольно оригинально и функционально.

Добавление объекта

Помимо основного функционала было еще множество рюшечек и бантиков, таких как вывод отмеченных объектов на печать, “карман” – выбор и сохранение в куках определенных объектов, контекстный поиск объекта и т.д.

В каждом шаге реализации я сталкивался с постоянными проблемами как с серверной частью, так и с яндекс api. За время разработки было выявлено несколько багов в api, который были исправлены разработчиками. Некоторые вещи, например, прибивание большого баллуна к низу карты, пришлось делать в обход дефолтного поведения карты.

В результате получился объемный проект, написанный с использованием современных технологий поверх некрокода, который работает и которого хватит еще на 5-7 лет.

Посмотреть можно здесь

Комментарии