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

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

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

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

#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 - Краснодарский край
#55 Антон 10-02-2017 в 20:15
Подскажите, как сюда можно добавить точки с городами?
#56 Олег 16-02-2017 в 07:44
К примеру так
"sl": {
"path": "m7.63 300.28 a3,3 0 1,0 6,0a3,3 0 1,0 -6,0",
"name": "г. Севастополь"
},
"mo": {
"path": "m150,250a3,3 0 1,0 6,0a3,3 0 1,0 -6,0",
"name": "г. Москва"
},
#57 ZiTX 25-03-2017 в 17:18
Рабочий вариант перехода по ссылке, при клике на регион изображенный на карте (Своя ссылка для каждого региона):
Находим в коде следующие строки:

onRegionClick: function(element, code, region){
alert(region+' - ' +code);
}

И заменяем их на:

onRegionClick: function(element, code, region)
{
window.open('http://site.ru/'+code, '_blank');
}
--------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
http://site.ru/ - ссылка на ваш сайт
code - аббревиатура региона латиницей (sm-Смоленская область) в данном примере code = sm. То-есть при клике на графическое изображение региона на карте пользователь перенаправляется на странницу - http://site.ru/sm/...........
Единственный минус придется создать папки с названиями как сокращение регионов
'sm' 'tr' 'bn' 'kj'
Если необходима ссылка на поддомен то нужно:

onRegionClick: function(element, code, region){
window.open(code+'.site.ru/', '_blank');
}
#58 Алексей 28-03-2017 в 12:59
Подскажите как на onRegionClick повесить чтобы popup было рядом с маркером?
#59 ZiTX 05-04-2017 в 18:43
добрый день.
Подскажите пожалуйста, как можно вывести в карте одну только московскую область, но таким образом чтобы она была уже увеличена по максимуму имеющегося зума.
Я удалил из файла jqvmap/js/maps/jquery.vmap.russia.js все лишние города, но при открытие страницы получается очень маленькая карта, а нужна такая как на максимальном увеличение. (то-есть чтобы пользователь не управлял размерами карты, а сразу видел ее в большом размере).
Или подскажите какой файл или строку нужно править для этого...
СПАСИБО!!!!
#60 Dkfl 27-04-2017 в 17:28
В описании разработчика есть pinMode, вроде добавляет картинку, кто нибудь разобрался с ним?
#61 Dkfl 27-04-2017 в 17:31
pinMode content

This option defines if the "pins" JSON contains the HTML strings of the pins or the ids of HTML DOM elements which are to be placed as pins.

If the pin mode is "content" (or not specified) then the parameter "pins" contains the stringified html content to be placed as the pins.

Example:


jQuery('#vmap').vectorMap({
map: 'world_en',
pins: { "pk" : "\u003cimg src=\"pk.png\" /\u003e" /*serialized <img src="pk.png" />*/, ... },
pinMode: 'content'
});


If the pin mode is "id" then the parameter "pins" contains the value of "id" attribute of the html (DOM) elements to be placed as pins. Example:


<script>
jQuery('#vmap').vectorMap({
map: 'world_en',
pins: { "pk" : "pin_for_pk", "ru" : "pin_for_ru", ... },
pinMode: 'id'
});
</script>
<div style="display:none">
<img id="pin_for_pk" src="pk.png" />
<div id="pin_for_ru">...</div>
</div>


Note:

The pin is placed at the center of the rectangle bounding the country. So depending on the shape of the country, the pin might not land on the country itself. For instance, the pin for 'US' lands in the center of Alaska and rest of the US, which happens to be in the ocean between them.

If the "pinMode" is set to "id", then the html DOM elements having those ids are NOT COPIED to the desired position, they are TRANSFERRED. This means that the elements will be removed from their original positions and placed on the map.
]
#62 Валерий 11-05-2017 в 02:39
Евгений, подскажите пожалуйста, как такую карту поставить на CMS Joomla 3.6.5? Всю голову сломал уже (((
Добавить новый комментарий

Автор:

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

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

cap

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


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

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

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

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