JVectorMap: update legend

934 views Asked by At

I'm using JVectorMap to show a map with colored countries. The map also includes a legend and an onRegionTipShow. In my application it's possible to alter the values the map is based on. After doing so, the map should be updated including colors, legend and tipShow. All works well except the update of the legend. The legend always stays the same.

I simply don't know how to reset the legend before updating the map. Can anyone hint me to the respective method, please?

Map initializing:

$('#myMap').vectorMap({
  map: 'world_mill',
  backgroundColor: '#FFFFFF',
  borderWidth: 1,
  color: '#D9D9DB',
  regionsSelectable: false,
  markersSelectable: false,
  zoomAnimate: true,
  zoomButtons : true,
  series: {
    regions: [{
      values: myData,
      scale: ['#FFB777', '#054696'],
      normalizeFunction: 'lineal',
      min: jvm.min(myData),
      max: jvm.max(myData),
      legend: { vertical: true }
    }]
  },
  onRegionTipShow: function(e, el, code){
    if(myData[code]) label = myData[code].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ''');
    else label = myData[code];
    el.html(el.html()+' ('+ label +')');
  },
  regionStyle: {
    initial: { fill: '#D9D9DB' },
    selected: { fill: '#EE442B' },
    hover: { 'fill-opacity': 1 }
  },
});
var myMapObj = $('#myMap').vectorMap('get', 'mapObject');
myMapObj.updateSize();

Update function:

myMapObj.series.regions[0].clear();
myMapObj.series.regions[0].params.min = undefined;
myMapObj.series.regions[0].params.max = undefined;
myMapObj.series.regions[0].scale.minValue = undefined;
myMapObj.series.regions[0].scale.maxValue = undefined;
myMapObj.series.regions[0].setValues(myData);

As you see, I set several methods to 'undefined' before updating myMap with the setValues method. I figure that there's a method for resetting the legend as well...

1

There are 1 answers

0
Bruno Fernandes On

Hi I had the same question and ended up giving up on using the api. Instead i did this:

document.getElementsByClassName('jvectormap-legend-title')[0].innerHTML = '<div class="jvectormap-legend-title">' + legenda + '</div>';