Интерактивная карта России jqvmap. Как поставить всплывающие подсказки на нескольких регионах?

Question

alexwprof @alexwprof

JavaScript

Интерактивная карта России jqvmap. Как поставить всплывающие подсказки на нескольких регионах?

Есть проблема с интерактивной картой Jqvmap. На карте есть регионы, при наведении мыши на регион, у области карты должен изменяться цвет, у каждого региона разный. Это мне удалось добиться. Однако, есть задача сделать всплывающую подсказку. Точно так же, к каждому региону или к группе регионов.

Подносим к региону мышь , появляется подсказка с подгруженным в неё массивом. Сейчас выделено 3 области, соответственно есть 3 переменных: data_obj , data_objj, data_test. Из них грузим список во всплывающее окно.

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

Как сделать, чтобы при наведении на отдельный регион выводился массив из конкретной переменной?

Ещё раз: я навожу мышь на Волгоградскую область, вылезает подсказка из переменной data_obj, навожу на Магаданскую область, вылезает подсказка из переменной data_objj, навожу на Иркутскую область, всплывает подсказка из массива data_test. Пока что я могу реальзовать всплытие подсказки только по одной переменной. Если ставлю больше, грузится только один массив.

Есть код :

// Массив всех объектов
 var data_obj = {
     'tl': ['Высокая 10', 'Средняя 5', 'Низкая 1'],
     'mc': ['Объект 3', 'Объект 4', 'Объект 5'],
     'sm': ['Объект 6', 'Объект 7', 'Объект 8']

 };

 var data_objj = {
     'kr': ['Объект 6', 'Объект 7', 'Объект 8'],
     'ya': ['Объект 6', 'Объект 7', 'Объект 8'],
     'sa': ['Объект 6', 'Объект 7', 'Объект 8'],
 };

 var data_test = {
     'ht': ['Объект 6', 'Объект 7', 'Объект 8'],
     'tm': ['Объект 6', 'Объект 7', 'Объект 8'],
     'km': ['Объект 6', 'Объект 7', 'Объект 8'],
 };

 colorRegion = '#1076C8'; // Цвет всех регионов
 focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из 
 списка
 selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов


 CVET = '#9A4C82';
 CVET1 = '#679A4C';
 TEST = '#C76E4D';

 highlighted_states = {};


 // Массив подсвечиваемых регионов, указанных в массиве data_obj
 for (iso in data_obj) {
     highlighted_states[iso] = CVET;
 }
 for (iso in data_objj) {
     highlighted_states[iso] = CVET1;
 }

 for (iso in data_test) {
     highlighted_states[iso] = TEST;
 }


 $(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 = '';
         },

     });

 });
 // Выводим список объектов из массива
 $(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>');
         }
     }

 });