Изменение цвета области в JVectorMap с кнопкой

Question

Я новичок в jvectormap, но нашел, что это потрясающе.

Я создал карту со следующими характеристиками. Когда карта загружается, около 30 стран имеют цвета, красные, желтые или зеленые, на основе некоторого балла, связанного с этой страной (например, процент населения, который является поклонниками Duran Duran). Остальные страны просто серые. (Существует некоторая интерактивность на цветных регионах, как всплывающие подсказки и щелчками.) Когда карта сначала создается, есть строка в конце:

map.series.regions[0].setValues(getColors(currentColor); 

и currentColor ранее были определены:

var currentColor = "[ALL]"; 

, так что все цвета (красный, желтый и зеленый) отображаются на карте, и это работает.

Под картой Я хочу предоставить кнопки, чтобы показывать только страны данного цвета, например, только красные. Когда нажимается красная кнопка, только красные страны будут показаны красным цветом, а остальные - серым. Каждый цвет будет иметь свою собственную кнопку.

Кажется, что это будет легко сделать. Я видел технику, используемую здесь: http://jvectormap.com/examples/random-colors/, где вы можете щелкнуть, чтобы случайно изменить цвета, и все остальное о карте (панорамирование, масштабирование и т. Д.) Остается неповрежденным. Ключевая часть:

map.series.regions[0].setValues(generateColors()); 

, когда у вас есть карта конструктор как:

map = new jvm.Map({ 

(Если ваша карта конструктор выглядит так:

$('#map').vectorMap({ 

, то вам нужно будет сделать что-то например:

var mapObject = $('#map').vectorMap('get', 'mapObject'); 
mapObject.series.regions[0].setValues(generateColors()); 

)

Я пытался сделать именно это, но с моим собственным getColors (цвет) Метод:

map.series.regions[0].setValues(getColors(currentColor)); 

где я регенерировать массив цвета карты, который передается setValues ​​(), но есть никаких изменений на карте. Я знаю, что массив цветов карты верен, потому что при нажатии кнопки было сделано следующее:

(1) изменить текущую переменную цвета (2) удалить контейнер div div: $ («#map»). empty() (3) перерисовать карту с нуля с помощью конструктора и вызова map.series.regions [0] .setValues ​​(getColors (currentColor));

Недостатком этого подхода является то, что любое панорамирование или масштабирование теряется, когда карта перерисовывается с нуля. Есть ли какой-то шаг, который мне не хватает, чтобы обновить карту, когда я звоню: map.series.regions [0] .setValues ​​()

Вот пример jsfiddle, показывающий, как он не работает, если вы не перерисовываете карту из scratch: http://jsfiddle.net/msalamon/euqyfs7v/10/

В jsfiddle, если вы называете «High Redraw», он отображает только красные страны, но только путем перерисовки.

Answer 1

Я понял. См.: http://jsfiddle.net/msalamon/euqyfs7v/11/.

Я предположил, что setValues ​​() полностью заменил предыдущие значения, поэтому любые отсутствующие значения были установлены на значение по умолчанию. Но вместо этого setValues ​​() заменяет только те значения, которые там были включены. Таким образом, при выборе определенного цвета/уровень с помощью кнопки, я изменил его так, что возвращаемый массив содержит значения по умолчанию для любого региона, который не входит:

 else 
     { 
      colors[code] = "#999999";     
     } 

Answer 2

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

<button id="update-colors-button2">change </button> 
<button id="update-colors-button">change </button> 


<div id="world-map" style="width: 600px; height: 400px"></div> 


<script type="text/javascript"> 
map = new jvm.WorldMap({ 
    map: 'chile', 
    container: $('#world-map'), 
    series: { 
     regions: [{ 
      attribute: 'fill' 
     }] 
    } 
}); 
$(function(){ 

    $('#update-colors-button').click(function(e){ 
    e.preventDefault(); 
    map.series.regions[0].clear(); 
    map.series.regions[0].setValues({'ari' : '#328942'}); 
    }); 

$('#update-colors-button2').click(function(e){ 
    e.preventDefault(); 
    map.series.regions[0].clear(); 
    map.series.regions[0].setValues({'ata' : '#328942'}); 

    }); 


}) 

</script>