버튼이있는 JVectorMap에서 지역 색상 변경

Question

저는 jvectormap을 처음 사용했지만 멋진 화면을 발견했습니다.

다음과 같은 특징을 가진지도를 만들었습니다. 지도가로드되면 해당 국가와 관련된 일부 점수 (듀란듀란 팬 인구의 비율과 같은)를 기준으로 약 30 개 국가에 빨간색, 노란색 또는 녹색 색이 적용됩니다. 나머지 국가들은 회색입니다. (툴팁 및 클릭과 같은 색깔의 지역에 대한 몇 가지 상호 작용이 있습니다.) 맵이 처음 생성 될 때,이 끝에 라인 :

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()); 

내가 setValues ​​()에 전달되는지도 색상의 배열을 다시

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

하지만이 : 10)

나는 정확히,하지만 내 자신의 getColors (컬러) 방법으로 할 노력했다 지도는 변경되지 않습니다. 내 해결 방법은 단추를 눌렀을 때 다음 작업을 수행했기 때문에지도 색상 배열이 올바른지 확인합니다.

(1) 현재 divColor 변수를 (2)으로 변경하여지도 div 컨테이너를 비 웁니다. $ ("#map"). empty() (3) 생성자와 map.series.regions [0] .setValues ​​(getColors (currentColor))) 호출을 사용하여 처음부터 맵을 다시 그립니다.

지도가 처음부터 다시 그려지면 모든 패닝 또는 확대/축소가 손실된다는 단점이 있습니다. 내가 전화 할 때지도를 업데이트하기 위해 누락 된 단계가 있습니까? map.series.regions [0] .setValues ​​()

다음은지도를 다시 그리지 않는 한 jsfiddle이 어떻게 작동하지 않는지 보여줍니다. 스크래치 : http://jsfiddle.net/msalamon/euqyfs7v/10/

"높은 다시 그리기"를 호출하면 jsfiddle에서 빨간색 국가 만 표시되지만 다시 그리기 만하면됩니다.

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>