Уважаемые читатели сайта 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 Просмотров: 44215

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

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

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

#62 Валерий 11-05-2017 в 02:39
Евгений, подскажите пожалуйста, как такую карту поставить на CMS Joomla 3.6.5? Всю голову сломал уже (((
#63 Дмитрий 31-05-2017 в 09:40
реализовал у себя на сайте http://rabotazagranica.com/. Спасибо за урок
#64 Александр 01-06-2017 в 23:43
Спасибо, отличный урок.
Реализация ссылок на страницы сайта, без создания дополнительных папок.


// Клик по региону
onRegionClick: function (event, code, region) {
switch (code) {
case "co":
window.location.replace("http://www.google.com");
break;
case "ca":
window.location.replace("http://www.yahoo.com");
break;
case "tx":
window.location.replace("http://www.bing.com");
break;
}
},
});

});
// Выводим список объектов из массива


Взято здесь:
https://stackoverflow.com/questions/12415274/jqvmap-click-function
#65 Алексей 06-07-2017 в 17:03
подскажите, как всплывающее окошко при наведении на область со списком городов, сделать чтоб оно всплывало в правую сторону?? в каком файле меняется и как поменять?
#66 taras 07-07-2017 в 12:43
Привет, скрипт работает на отдельной странице. Если же я подключаю скрипт к себе на страницу, то почему то карта пропадает . Например, заголовок html файла со скриптом 111.php он у меня работает и карта запускается. Если же я его переименую в тот файл на котором у меня выводится главная страница сайта, например -razdel.php то почему ток арта перестает отоьражаться. Причем в самом файле все без изменений, просто переименовал и все. Если переименовать по другому, то работает. Где копать?
#67 Максим 12-07-2017 в 12:54
Добрый день. Подскажите, вставил карту на сайта сделанный в CMS OpenCart, она не одаптируется под мобильную версию, где копать?
#68 vlad 23-10-2017 в 15:34
Здравствуйте!
Подскажите пожалуйста как избавиться от кракозяблицы, при наведении на область на карте? Какая должна быть кодировка устанавливаемая для скрипта? Заранее спасибо, с уважением, Владимир!
#69 Сергей 24-10-2017 в 20:31
Все отлично работает, спасибо! Единственное - в Архангельской области нет Земли Франца Йосифа. Кто-нибудь знает, где найти корректные границы или какой формат у параметра path, чтобы самому нарисовать ?
#70 atner 01-12-2017 в 01:46
А как свою карту сделать?
#71 SE 10-12-2017 в 17:34
Салют, подскажешь как резиновость для карты добавить?
Добавить новый комментарий

Автор:

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

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

cap

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


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

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

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

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