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