<html>
<head>
<meta charset="UTF-8">
<div>
<tr>
<td style="height: 50px">
<select>
<option value ="1">Регион1</option>
<option value ="2">Регион2</option>
<option value ="3">Регион3 </option>
</select>
</td>
</tr>
</div>
<link href="./css/jqvmap.css" rel="stylesheet">
<script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/jqvmap.js"></script>
<script src="./js/ukraine.js"></script>
<script>
var data_obj = {
};
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: 'ukraine',
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(){
$('select.color').change(function() {
$('#maps > div').hide(); //скрыть неактивную
$('#vmap'+this.value).show() //показать активную
});
$('.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);
});
/////
var data_obj = {
};
colorRegion = '#1076C8'; // Цвет всех регионов
focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка
selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов
highlighted_states = {};
// Массив подсвечиваемых регионов, указанных в массиве data_obj
for(iso in data_obj){
highlighted_states[iso] = selectRegion;
}
$(document).ready(function() {
$('#vmap1').vectorMap({
map: 'ukraine',
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(){
$('select.color').change(function() {
$('#maps > div').hide(); //скрыть неактивную
$('#vmap'+this.value).show() //показать активную
});
$('.focus-region').mouseover(function(){
iso = $(this).prop('id');
fregion = {};
fregion[iso] = focusRegion;
$('#vmap1').vectorMap('set', 'colors', fregion);
});
$('.focus-region').mouseout(function(){
c = $(this).attr('href');
cl = (c === '#')?colorRegion:c;
iso = $(this).prop('id');
fregion = {};
fregion[iso] = cl;
$('#vmap1').vectorMap('set', 'colors', fregion);
});
/////
var data_obj = {
};
colorRegion = '#1076C8'; // Цвет всех регионов
focusRegion = '#FF9900'; // Цвет подсветки регионов при наведении на объекты из списка
selectRegion = '#0A4C82'; // Цвет изначально подсвеченных регионов
highlighted_states = {};
// Массив подсвечиваемых регионов, указанных в массиве data_obj
for(iso in data_obj){
highlighted_states[iso] = selectRegion;
}
$(document).ready(function() {
$('#vmap2').vectorMap({
map: 'ukraine',
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(){
$('select.color').change(function() {
$('#maps > div').hide(); //скрыть неактивную
$('#vmap'+this.value).show() //показать активную
});
$('.focus-region').mouseover(function(){
iso = $(this).prop('id');
fregion = {};
fregion[iso] = focusRegion;
$('#vmap2').vectorMap('set', 'colors', fregion);
});
$('.focus-region').mouseout(function(){
c = $(this).attr('href');
cl = (c === '#')?colorRegion:c;
iso = $(this).prop('id');
fregion = {};
fregion[iso] = cl;
$('#vmap2').vectorMap('set', 'colors', fregion);
});
});
});
});
</script>
</head>
<body>
<div id="vmap" style="width: 800px; height: 500px;"></div>
<div id="vmap1" style="width: 800px; height: 500px;"></div>
<div id="vmap2" style="width: 800px; height: 500px;"></div>
</body>
</html>
