Sum.cogitans
08.11.2013, 04:39
Предисловие
Всем ачатовцам доброй ночи. Сразу скажу, что статья в общем и целом отходит от общей тематики, тем не менее если бы я на такую наткнулся, то последние пару дней, я бы мог потратить на жену. В любом случае чужой опыт, в рамках реальных задач всегда не лишний и если Вам будет интересно дочитать мое нытье до конца, то в дальнейшем, на основе моих страданий с картами, вы сможете смоделировать любую группу объектов под 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 (http://inkscape.org) - SVG редактор
jqvmap (http://jqvmap.com) - Библиотека
Создание SVG
Основные инструменты которые надо знать в Inkscape:
1. Группировка объектов - не подходит для получения корректного path, я испытал первый приступ бешенства, когда это выяснил. Для получения корректных координат надо выделить объекты которые должны быть одним целым и объединить контур (Контур > Объединить)
2. Инструмент произвольные контуры - не подходит для получения корректного path, я испытал восьмой приступ бешенства, когда это выяснил. Дело в том, что в момент заливки таких объектов уже в jqvmap, самопересечения или субконтуры образуют дырку в Вашем объекте, даже если изменить эту опцию в настройках - короче получается полная хрень. Так что полсе отрисовки нужного объекта, выберите Заливку замкнутой области. Получившийся объект и будет выдавать Вам корректный path. Так же, прийдется поиграть с настройками этого инструмента (порог \ интервалы etc), если надо получить в точности то, что вы рисовали.
3. Теперь, получаем результат наших трудов - выбираем объект > Правка > XML редактор. Откроется окно, которое будет указывать на класс выбраного нами объекта, видим атрибут d, в котором находится наш path. ГИП ГИП УРА!
Кастомим jqvmap
Дальше все предельно просто, врубаем jquery, подключаем бибилотеку jqvmap + sampledata + наши path, инициируем, ставим div в тело.
Структура файла карт (находится в каталоге maps):
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":"Шельф"}}});
Инициируем нашу прелесть:
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',// Ага, спасибо!
}
});
});
Ссылки из объектов в jqvmap отсуствуют, добавим
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');
br eak;
case"tu":
window.open('/some_direction/page_3.php,'_top');
br eak;
case "uz":
wi ndow.open('/some_direction/page_4.php','_top');
br eak;
case "az":
wi ndow.open('/some_direction/page_5.php','_top');
br eak;
case "uk":
wi ndow.open('/some_direction/page_6.php','_top');
br eak;
case "sh":
wi ndow.open('/some_direction/page_7.php','_top');
br eak;
}
}
Позиционирование карт
Если помните, в тз был еще один параметр, так называемые направление деятельности. Суть в том, что у каждого направления, есть набор своих регионов и пользователь должен иметь возможность выбрать его. Решение выбрал достаточно простое, т.к. хотелось уже завязывать с этим вопросом - делаем табы с направлениями, куда закидываем разные карты с нужным набором регионов.
Когда я все причесал, сверстал и нажал долгожданную cmd+r, что бы посмотреть результат, выяснилось что дальше первой карты ничего не работает. Первым делом я конечно же пошел менять коды регионов, чертыхаясь своей недальновидностью. Но не тут то было, все равно ничего не работало. От безысходности, перепробовав все варианты, я пошел читать всякие забугорные статьи бородатых дядек, о процессе SVG моделирования на jQuery и о чудо, я все понял.
Проблема оказалась не в "дальше первой карты", а в "дальше первой вкладки". Дело в том, что jqvmap рисовал таки свои карты, но по логике табов они были позиционированы где-то в космосе относительно окна браузера и там оставались, даже после активации таба.
В общем-то решение было очевидно, убрать карты в iframe, для чего в ссылках и добавлен атрибут _top (кто не понял, ссылка в iframe - открывается в iframe, данный атрибут повзоляет открыть ее в текущем окне). Вообще, может это решение не очень мудрое с точки зрения оптимизации (что безусловно можно решить, по желанию), но если Вам нужно подключать на страницу более одной группы объектов - такое решение будет как минимум удобней, не надо будет морочиться с разными кодами и скролить head в дальнейшем.
FIN
Лицезрев труды своей работы, делая жутко недовольный и замученный вид, но патаенно испытывая экстатическое наслаждение от решения очередной "не типовой" для себя задачи, я отправился домой, что бы поделиться этой радостью с Вами.
2013 (c) Sum cogitans
Всем ачатовцам доброй ночи. Сразу скажу, что статья в общем и целом отходит от общей тематики, тем не менее если бы я на такую наткнулся, то последние пару дней, я бы мог потратить на жену. В любом случае чужой опыт, в рамках реальных задач всегда не лишний и если Вам будет интересно дочитать мое нытье до конца, то в дальнейшем, на основе моих страданий с картами, вы сможете смоделировать любую группу объектов под 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 (http://inkscape.org) - SVG редактор
jqvmap (http://jqvmap.com) - Библиотека
Создание SVG
Основные инструменты которые надо знать в Inkscape:
1. Группировка объектов - не подходит для получения корректного path, я испытал первый приступ бешенства, когда это выяснил. Для получения корректных координат надо выделить объекты которые должны быть одним целым и объединить контур (Контур > Объединить)
2. Инструмент произвольные контуры - не подходит для получения корректного path, я испытал восьмой приступ бешенства, когда это выяснил. Дело в том, что в момент заливки таких объектов уже в jqvmap, самопересечения или субконтуры образуют дырку в Вашем объекте, даже если изменить эту опцию в настройках - короче получается полная хрень. Так что полсе отрисовки нужного объекта, выберите Заливку замкнутой области. Получившийся объект и будет выдавать Вам корректный path. Так же, прийдется поиграть с настройками этого инструмента (порог \ интервалы etc), если надо получить в точности то, что вы рисовали.
3. Теперь, получаем результат наших трудов - выбираем объект > Правка > XML редактор. Откроется окно, которое будет указывать на класс выбраного нами объекта, видим атрибут d, в котором находится наш path. ГИП ГИП УРА!
Кастомим jqvmap
Дальше все предельно просто, врубаем jquery, подключаем бибилотеку jqvmap + sampledata + наши path, инициируем, ставим div в тело.
Структура файла карт (находится в каталоге maps):
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":"Шельф"}}});
Инициируем нашу прелесть:
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',// Ага, спасибо!
}
});
});
Ссылки из объектов в jqvmap отсуствуют, добавим
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');
br eak;
case"tu":
window.open('/some_direction/page_3.php,'_top');
br eak;
case "uz":
wi ndow.open('/some_direction/page_4.php','_top');
br eak;
case "az":
wi ndow.open('/some_direction/page_5.php','_top');
br eak;
case "uk":
wi ndow.open('/some_direction/page_6.php','_top');
br eak;
case "sh":
wi ndow.open('/some_direction/page_7.php','_top');
br eak;
}
}
Позиционирование карт
Если помните, в тз был еще один параметр, так называемые направление деятельности. Суть в том, что у каждого направления, есть набор своих регионов и пользователь должен иметь возможность выбрать его. Решение выбрал достаточно простое, т.к. хотелось уже завязывать с этим вопросом - делаем табы с направлениями, куда закидываем разные карты с нужным набором регионов.
Когда я все причесал, сверстал и нажал долгожданную cmd+r, что бы посмотреть результат, выяснилось что дальше первой карты ничего не работает. Первым делом я конечно же пошел менять коды регионов, чертыхаясь своей недальновидностью. Но не тут то было, все равно ничего не работало. От безысходности, перепробовав все варианты, я пошел читать всякие забугорные статьи бородатых дядек, о процессе SVG моделирования на jQuery и о чудо, я все понял.
Проблема оказалась не в "дальше первой карты", а в "дальше первой вкладки". Дело в том, что jqvmap рисовал таки свои карты, но по логике табов они были позиционированы где-то в космосе относительно окна браузера и там оставались, даже после активации таба.
В общем-то решение было очевидно, убрать карты в iframe, для чего в ссылках и добавлен атрибут _top (кто не понял, ссылка в iframe - открывается в iframe, данный атрибут повзоляет открыть ее в текущем окне). Вообще, может это решение не очень мудрое с точки зрения оптимизации (что безусловно можно решить, по желанию), но если Вам нужно подключать на страницу более одной группы объектов - такое решение будет как минимум удобней, не надо будет морочиться с разными кодами и скролить head в дальнейшем.
FIN
Лицезрев труды своей работы, делая жутко недовольный и замученный вид, но патаенно испытывая экстатическое наслаждение от решения очередной "не типовой" для себя задачи, я отправился домой, что бы поделиться этой радостью с Вами.
2013 (c) Sum cogitans