Предисловие

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

Суть задачи

В ТЗ была описана, так называемая "Интерактивная карта", которая подразумевала навигацию по котологу неких отчетов. Предусмотрено 2 основных параметра, направление деятельности и регион. Я не буду описывать и приводить примеры, построения каталога и смежных вопросов типа: jQuery tabs, подключение iframe, css etc т.к. этой инфы у гугла с лихвой, а сконцентрируюсь только на том, что лично для меня было ново.

Подбор софта \ библиотеки

Да да да, мне пришлось рисовать эти чертовы карты в SVG и после 6 часов копирования Google maps, с неработающим cmd+tab из под X11 на OSx, я был готов убивать. Пошел я на это, лишь потому что, набор стран должен быть представлен в формате описаном ТЗ, так же на карте присутствовали нефтяные Шельфы России, искать которые в SVG исходниках - без толку. Так что, хорошая новость для вас - я затрону ключевые моменты работы с SVG редактором.

Первым делом я конечно же ломанулся в illustrator, но был крайне разачарован, тем что при экспорте вектора в SVG не отдается параметр path (набор координат и действия для jQuery), даже если мучать настройки. Не долго думая я решил, что мою проблему исправит online конвертер, но к сажалению как выяснилось, выдача path происходит в неподходящем к выбронной мною библиотеке формате. Это можно определить на глаз, по мимо разных координат, пробелы заменены тире.

В итоге пробежавшись по предоставленным программам, я остановился на Inkscape, основным фактором для меня была работа под OSx:

1. Он бесплатный

2. Доступные платформы - OSx \ Linux \ Windows

3. Весит не много, а я сидел у заказчика в офисе, где интернет не ахти

P.s. Единственный фактор, который меня выморозил - это тот факт, что на OSx он поднялся под X11, который в свою очередь имеет свой набор хоткеев, при отключении ассоциации которых, оные вообще перестают работать. За учетом того, что например в моем случае идет одновременная работа: Inkscape + Aptana Studio + Safari + Chrome, получается 3 разных набора хоткеев и самое страшное для меня - замена cmd на ctrl в X11. Это не то, что бы не удобно. Это бесит, если изолгаться в рамках правил форума.

Относительно бибилиотеки jQuery, я выбрал jqvmap:

1. Проект живой, можно качать null версию, ничьи кривые руки ее не кастумили

2. Есть большой набор уже готовых карт, мне это конечно было не к чему, но я их поковырял пока разбирался

3. Чистая, минимальный набор функционала

Ссылки:

Inkscape - SVG редактор

jqvmap - Библиотека

Создание SVG

Основные инструменты которые надо знать в Inkscape:

1. Группировка объектов - не подходит для получения корректного path, я испытал первый приступ бешенства, когда это выяснил. Для получения корректных координат надо выделить объекты которые должны быть одним целым и объединить контур (Контур > Объединить)

2. Инструмент произвольные контуры - не подходит для получения корректного path, я испытал восьмой приступ бешенства, когда это выяснил. Дело в том, что в момент заливки таких объектов уже в jqvmap, самопересечения или субконтуры образуют дырку в Вашем объекте, даже если изменить эту опцию в настройках - короче получается полная хрень. Так что полсе отрисовки нужного объекта, выберите Заливку замкнутой области. Получившийся объект и будет выдавать Вам корректный path. Так же, прийдется поиграть с настройками этого инструмента (порог \ интервалы etc), если надо получить в точности то, что вы рисовали.

3. Теперь, получаем результат наших трудов - выбираем объект > Правка > XML редактор. Откроется окно, которое будет указывать на класс выбраного нами объекта, видим атрибут d, в котором находится наш path. ГИП ГИП УРА!

Кастомим jqvmap

Дальше все предельно просто, врубаем jquery, подключаем бибилотеку jqvmap + sampledata + наши path, инициируем, ставим div в тело.

Структура файла карт (находится в каталоге maps):

Инициируем нашу прелесть:

Ссылки из объектов в jqvmap отсуствуют, добавим

Позиционирование карт

Если помните, в тз был еще один параметр, так называемые направление деятельности. Суть в том, что у каждого направления, есть набор своих регионов и пользователь должен иметь возможность выбрать его. Решение выбрал достаточно простое, т.к. хотелось уже завязывать с этим вопросом - делаем табы с направлениями, куда закидываем разные карты с нужным набором регионов.

Когда я все причесал, сверстал и нажал долгожданную cmd+r, что бы посмотреть результат, выяснилось что дальше первой карты ничего не работает. Первым делом я конечно же пошел менять коды регионов, чертыхаясь своей недальновидностью. Но не тут то было, все равно ничего не работало. От безысходности, перепробовав все варианты, я пошел читать всякие забугорные статьи бородатых дядек, о процессе SVG моделирования на jQuery и о чудо, я все понял.

Проблема оказалась не в "дальше первой карты", а в "дальше первой вкладки". Дело в том, что jqvmap рисовал таки свои карты, но по логике табов они были позиционированы где-то в космосе относительно окна браузера и там оставались, даже после активации таба.

В общем-то решение было очевидно, убрать карты в iframe, для чего в ссылках и добавлен атрибут _top (кто не понял, ссылка в iframe - открывается в iframe, данный атрибут повзоляет открыть ее в текущем окне). Вообще, может это решение не очень мудрое с точки зрения оптимизации (что безусловно можно решить, по желанию), но если Вам нужно подключать на страницу более одной группы объектов - такое решение будет как минимум удобней, не надо будет морочиться с разными кодами и скролить head в дальнейшем.

FIN

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

2013 (c) Sum cogitans