Предисловие Всем ачатовцам доброй ночи. Сразу скажу, что статья в общем и целом отходит от общей тематики, тем не менее если бы я на такую наткнулся, то последние пару дней, я бы мог потратить на жену. В любом случае чужой опыт, в рамках реальных задач всегда не лишний и если Вам будет интересно дочитать мое нытье до конца, то в дальнейшем, на основе моих страданий с картами, вы сможете смоделировать любую группу объектов под 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): PHP: jQuery.fn.vectorMap('addMap','[имя_карты]',{"width":[ширина],"height":[высота],"pathes":{ "[код_объекта]":{"path":"[значение_path]","name":"[название_для_ховера]"}, "kz":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Казахстан"}, "tu":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Туркменистан"}, "uz":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Узбекистан"}, "az":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Азербайджан"}, "uk":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Украина"}, "sh":{"path":"m 12.958961,158.51389 c -5.1155772...","name":"Шельф"}}}); Инициируем нашу прелесть: PHP: <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#vmap').vectorMap({ // #ID где будет инициализированы наши объекты, не забываем растянуть в CSS map: 'my_objects', // Подключение карты (имя) backgroundColor: '', // Фон color: '#9ab8cd', // Цвет объектов hoverOpacity: 0.7, // Уровень прозрачности при ховере selectedColor: '', // Цвет, выделенного объекта enableZoom: false, // Кнопочки + \ - showTooltip: true, // Вывод название при ховере values: sample_data, // Подключение sample_data scaleColors: ['#C8EEFF', '#2a82aa'], // Тут можем разнообразить цвета объектов normalizeFunction: 'polynomial', // Ага, спасибо! } }); }); </script> Ссылки из объектов в jqvmap отсуствуют, добавим PHP: onRegionClick: function(element, code, region) { switch (code) { case "ru": // Тут добавляем код объекта из файла с path, на который будем вешать url window.open('/some_direction/page_1.php','_top'); // Обратите внимание на атрибут _top, он для iframe, поясню ниже break; case "kz": window.open('/some_direction/page_2.php','_top'); break; case "tu": window.open('/some_direction/page_3.php,'_top'); break; case "uz": window.open('/some_direction/page_4.php','_top'); break; case "az": window.open('/some_direction/page_5.php','_top'); break; case "uk": window.open('/some_direction/page_6.php','_top'); break; case "sh": window.open('/some_direction/page_7.php','_top'); break; } } Позиционирование карт Если помните, в тз был еще один параметр, так называемые направление деятельности. Суть в том, что у каждого направления, есть набор своих регионов и пользователь должен иметь возможность выбрать его. Решение выбрал достаточно простое, т.к. хотелось уже завязывать с этим вопросом - делаем табы с направлениями, куда закидываем разные карты с нужным набором регионов. Когда я все причесал, сверстал и нажал долгожданную cmd+r, что бы посмотреть результат, выяснилось что дальше первой карты ничего не работает. Первым делом я конечно же пошел менять коды регионов, чертыхаясь своей недальновидностью. Но не тут то было, все равно ничего не работало. От безысходности, перепробовав все варианты, я пошел читать всякие забугорные статьи бородатых дядек, о процессе SVG моделирования на jQuery и о чудо, я все понял. Проблема оказалась не в "дальше первой карты", а в "дальше первой вкладки". Дело в том, что jqvmap рисовал таки свои карты, но по логике табов они были позиционированы где-то в космосе относительно окна браузера и там оставались, даже после активации таба. В общем-то решение было очевидно, убрать карты в iframe, для чего в ссылках и добавлен атрибут _top (кто не понял, ссылка в iframe - открывается в iframe, данный атрибут повзоляет открыть ее в текущем окне). Вообще, может это решение не очень мудрое с точки зрения оптимизации (что безусловно можно решить, по желанию), но если Вам нужно подключать на страницу более одной группы объектов - такое решение будет как минимум удобней, не надо будет морочиться с разными кодами и скролить head в дальнейшем. FIN Лицезрев труды своей работы, делая жутко недовольный и замученный вид, но патаенно испытывая экстатическое наслаждение от решения очередной "не типовой" для себя задачи, я отправился домой, что бы поделиться этой радостью с Вами. 2013 (c) Sum cogitans
Неплохая статья))) У меня тоже возникли проблемы с подобной картой. Понадобилась карта областей России и стран СНГ. Так как с векторной графикой дел раньше не имел, заказал на фрилансе схематическую карту в SVG формате. Исполнитель сделал ее в Кореле. Перед началом работы я спрашивал его - будут ли проблемы при импорте в Инскейп, на что получил ответ, что проблем не будет. Но после сдачи готовой карты, проблемы все-таки возникли: в XML редакторе не отображался этот параметр "path" для нескольких объектов этой карты. Я несколько раз отправлял карту на доработку и вроде бы в конце концов исполнитель добился, чтобы параметр отображался у всех объектов. Но как оказалось, все равно проблемы остались: если я вставляю значения этого параметра из любого объекта в jqvmap, на странице не отображаются эти объекты. Но, если, я рисую в Инскейпе окружность рядом с этой картой, копирую path из окружности – вставляю в js скрипт, окружность появляется на странице. А с любым объектом из этой карты, такое не получается, объект просто не отображается на странице. Получается или проблемы при импорте или исполнитель некорректно задал какие-то параметры: заливка или слои, в общем, карта бесполезна. Ничего в голову не приходит, не могли бы вы помочь советом, в чем может быть дело? Заранее спасибо.
Извиняюсь, что отвечаю как слоупок, через 2 месяца. Но все же, может кому-то в дальнейшем поможет. expert3030 Твоя бедя в том, что jqvmap очень придирчив к формату path, по сути, он воспринимает только один из видов. Как показал опыт, после изучения различных SVG редакторов, оные унификацией значения path не парятся. В твоем случае, если в предоставленном тебе исходнике нет возможности "Залить замкнутую область", он для тебя действительно бесполезен, если ты конечно не хочешь обрисовывать карту второй раз в Inkscape. P.s. Мне самому, было бы интересно глянуть формат path, который у тебя не читал jqvmap.