Интерактивная карта России на jqvmap. Как добавить несколько карт?

296

03 августа 2018, 22:00

День добрый. Есть интерактивная карта. Вот с таким скриптом. И нужно чтобы на сайте было несколько карт России. Так как они разных цветов и разные ссылки при нажатие на регион. Как реализовать это? Где нужно добавить id и возможно ли это. Сайт на вордпрессе. Поэтому, чтобы скрипт заработал пришлось его вставить в футер иначе он не видел карту. Буду благодарна ,если кто-то сможет помочь.

var data_obj = { 
  'no': ['Объект 1', 'Объект 2'], 
  'kr': ['Объект 3', 'Объект 4', 'Объект 5'], 
  'ir': ['Объект 6', 'Объект 7', 'Объект 8'] 
}; 
 
colorRegion = '#1076C8'; // Цвет всех регионов 
focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка 
selectRegion = '#1076C8'; // Цвет изначально подсвеченных регионов 
 
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(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; 
      } 
    }, 
  }); 
 
}); 
// Выводим список объектов из массива 
$(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); 
  }); 
});