javascriptjqueryjvectormap

jVectorMap not able to retrieve map object


I have a jQuery vector map defined as follows:

<div id="worldMap" style="width:800px;height:550px"></div>

In the JS onReady function:

$('#worldMap').vectorMap({
  map: 'world_en',
  backgroundColor: '#a5bfdd',
  color: '#f4f3f0',
  hoverColor: '#0000ff',
  hoverOpacity: null,
  selectedColor: '#666666',                
  attribute: 'fill',
  enableZoom: true,
  showTooltip: true, 
  values: sample_data,                 
  scaleColors: ['#ffffff', '#a00000'],
  normalizeFunction: 'polynomial',             
  onRegionClick: function(element,code,region) {
    displayInfo(code,region);    
  }
});

I set a timer to kick every five minutes to update the map data. The function it calls is:

function updateMap() {         
  $.getJSON('docs/testdata.json',function(data) {
    var map=$("#worldMap").vectorMap('get','mapObject');
    map.series.region[0].setValues(data);
  });
}

The map displays correctly in the browser with all data points. The problem arises when updateMap() is called. It cannot get the mapObject (it is always undefined). Thinking it was some kind of timing issue, I moved the var map=$(... line to immediately after the definition in the onready initialization of the map and MAP is still undefined.


Solution

  • I have the same problem

    I solve it with that :

    map = new jvm.Map({
        container: jQuery('#world-map'),
        map: "map",
        regionsSelectable: true,
        regionsSelectableOne: true,
        backgroundColor: 'transparent',
        zoomMax: 1,
        zoomMin: 1,
        zoomOnScroll: false
    });
    
    map.clearSelectedRegions();