Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JQuery / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Интерактивная векторная карта России JQVMap

Здравствуйте! Недавно на одном из сайтов мне потребовалось вставить интерактивную карту России со всеми регионами. Как оказалось подобных скриптов карт немного и большинство либо не соответствовали требованиям, либо были платными. Требования к такой карте были следующие:

  • Карта должна быть довольно хорошо прорисована (Все границы регионов должны быть похожи на реальные),
  • На карту можно добавлять объекты, которые будут появляться при наведении на соответствующий регион,
  • Карту можно было легко адаптировать по размерам и цветам под стиль сайта,
  • Подсветка регионов, в которых есть объекты другим цветом.
JQVMap

И вот я наткнулся на JQVMap – карты в формате SVG. Первое что мне понравилось – это хорошо прорисованная карта России. Почитав документацию, я понял, что и все мои задачи можно решить, хотя поначалу и возникли некоторые трудности.

Скачав архив, я нашел в нем пример как эту самую карту подключить на сайт. Здесь все очень просто. Подключаем скрипты и стили:

<link href="jqvmap/css/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="jqvmap/js/jquery.vmap.js" type="text/javascript"></script>
<script src="jqvmap/js/maps/jquery.vmap.russia.js" type="text/javascript"></script>

Создаем блок для будущей карты, указав размеры:

<div id="vmap" style="width: 800px; height: 500px;"></div>

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

<script  type="text/javascript">
// Массив всех объектов           
var data_obj = { 'no': ['Объект 1', 'Объект 2'], 'kr': ['Объект 3', 'Объект 4', 'Объект 5'], 'ir': ['Объект 6', 'Объект 7', 'Объект 8'] };
colorRegion = '#1076C8'; // Цвет всех регионов focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов
highlighted_states = {};
// Массив подсвечиваемых регионов, указанных в массиве data_obj for(iso in data_obj){ highlighted_states[iso] = selectRegion; }
$(document).ready(function() { $('#vmap').vectorMap({ map: 'russia', backgroundColor: '#ffffff', borderColor: '#ffffff', borderWidth: 2, color: colorRegion, colors: highlighted_states, hoverOpacity: 0.7, enableZoom: true, showTooltip: true,
// Отображаем объекты если они есть onLabelShow: function(event, label, code){ name = '<strong>'+label.text()+'</strong><br>';
if(data_obj[code]){ list_obj = '<ul>'; for(ob in data_obj[code]){ list_obj += '<li>'+data_obj[code][ob]+'</li>'; } list_obj += '</ul>'; }else{ list_obj = ''; }                                                            
label.html(name + list_obj); list_obj = ''; },                                           
// Клик по региону
onRegionClick: function(element, code, region){ alert(region+' - ' +code); } }); });
// Выводим список объектов из массива $(document).ready(function() { for(region in data_obj){ for(obj in data_obj[region]){ $('.list-object').append('<li><a href="'+selectRegion+'" id="'+region+'" class="focus-region">'+data_obj[region][obj]+' ('+region+')</a></li>');
} } });
// Подсветка регионов при наведении на объекты $(function(){ $('.focus-region').mouseover(function(){ iso = $(this).prop('id'); fregion = {}; fregion[iso] = focusRegion; $('#vmap').vectorMap('set', 'colors', fregion); });
$('.focus-region').mouseout(function(){ c = $(this).attr('href'); cl = (c === '#')?colorRegion:c; iso = $(this).prop('id'); fregion = {}; fregion[iso] = cl; $('#vmap').vectorMap('set', 'colors', fregion); }); }); </script>

В самом начале идет массив data_obj со всеми имеющимися объектами в регионах в формате

data_obj = {
	'no': ['Объект 1', 'Объект 2']
}

В качестве ключа используется код региона по стандартам ISO, который представляет собой двухбуквенное значение на английском языке (В исходниках приложен файл с расшифровкой всех обозначений). А значением служит еще один массив со списком объектов в этом регионе. В коде выше у нас имеется два объекта в Новгородской области (no). Далее идут переменные, задающие цвет для наших регионов:

colorRegion - цвет всех регионов по умолчанию
focusRegion - цвет подсветки регионов при наведении на объекты из списка
selectRegion - цвет изначально подсвеченных регионов

Далее идет инициализация карты со следующими параметрами:

map – название карты,
backgroundColor – цвет фона карты,
borderColor – цвет границ регионов,
borderWidth – толщина границ,
color – цвет всех регионов по умолчанию,
colors    - массив подсвечиваемых регионов с указанием цвета,        
hoverOpacity – прозрачность цвета регионов при наведении на них,
enableZoom – включение кнопок масштабирования карты,
showTooltip – отображение всплывающих подсказок.

Более подробно о всех параметрах можно почитать на официальном сайте, однако я не очень понял как некоторые из них работают. Затем у нас идет  onLabelShow функция обратного вызова выполняется перед отображением лейбла с названием региона. В ней мы добавляем все объекты в лейбл для отображения. Функция onRegionClick выполняется при клике на объекте. В нашем примеры мы просто выводим название и код региона с помощью alert. Также существуют функции onRegionOver - выполняется при наведении на регион и onRegionOut - выполняется при уводе курсора мыши с объекта. В принципе мои задачи на этом  были решены, но я решил продолжить изучение скрипта. А что если бы мы могли вывести список регионов под картой и при наведении на соответствующий он подсвечивался. В документации описан метод для динамического обновления цветов на карте:

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'}); 

В нем мы задаем массивом список областей на карте и соответственно цвет. Для примера я создал список и написал небольшую функцию, которая приведена выше:

<ul>
	<li><a  href="#" id="sr" class="focus-region">Саратовская область</a></li>
	<li><a  href="#" id="mr" class="focus-region">Республика Мордовия</a></li>
	<li><a  href="#" id="pe" class="focus-region">Пермская область</a></li>
	<li><a  href="#" id="al" class="focus-region">Алтайский край</a></li>
</ul>

Теперь при наведении на название у нас подсвечивается нужная область. Было бы хорошо вывести список всех объектов, и чтобы при наведении на них подсвечивалась соответствующая область. Писать все вручную неохота, тем более у нас уже есть массив, поэтому просто выведем его в цикле. Обратите внимание на атрибут href – он указывает, на какой цвет будет меняться регион при уводе мышки. Сделали мы это для того что бы регионы, в которых есть объекты, перекрашивались  не на цвет по умолчанию, а на цвет изначально подсвеченных регионов (selectRegion).

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

 

UPD 25.11.2014. На карте появилась "Республика Крым". Спасибо Владимиру Горячеву за помощь в доработке карты.

Автор: Евгений Бочкарев Урок добавлен: 16 Сентября 2014 в 21:33 Просмотров: 29108

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (44)

#45 oleg 25-05-2016 в 09:42
hoverOpacity – прозрачность цвета регионов при наведении на них,
поставь так hoverOpacity: 1, вместо 0.7
#46 kris 21-06-2016 в 15:32
А есть реализация или как сделать на карте флажки в подсвеченных регионов?
#47 Serge 18-07-2016 в 14:48
Сможет кто-нить подсказать, как добавить к карте РФ, карту Белорусии и Казахстана?
#48 бабка 01-09-2016 в 14:59
Как список всех регионов то вывести?
#49 Gena 16-09-2016 в 03:58
Никак зум не хочет работать, как исправить?
#50 Джорик 18-09-2016 в 00:03
Простой переход по ссылке при клике на регион:

onRegionClick: function(element, code, region)
{
window.location = 'http://www.emecon.ru/';

}
#51 Гость 28-10-2016 в 15:54
Люди, чем задавать тут вопросы, пройди по ссылке на JQVMap и задайте на гитхабе вопрос разработчикам, если в доках нет инфы.
#52 Максим 04-01-2017 в 12:18
Народ, подскажите для onRegionClick при нажатии на региона, чтобы открывалась странице в другом окне?

#53 Владимир А. 15-01-2017 в 05:25


onRegionClick: function(element, code, region){
function isEmpty(str) {
return (!str || 0 === str.length);
}

for (obj in mapData) {
datas = mapData[obj];
var abbr = datas.abbreviation;
if(code == abbr){
if ( isEmpty(datas)) {
console.log('empty object');
}else {

window.open('http://ajaxs.ru/', '_blank');


}
}
}

}



mapData - это данные для региона: аббревиатура, слаг, дополнительная информация и т.д.
abbr - это аббревиатура региона

#54 Владимир А. 15-01-2017 в 05:31
В текстовом файле ошибка Краснодарский край повторяется под аббревиатурами ks и kr

Правильно будет:

kr - Красноярский край
ks - Краснодарский край
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки