CODEWITHSUNDEEP
javascriptjqueryjqvmap
user3399805
user3399805

Reputation: 49

Jvectormap clear previous data from map in AJAX load

I'm using jvectormap and I noticed that map data is actually accumulating on each call. For example, if there was 1 from spain, and on next load there is 1 from Italy, on 2nd map load it show 1 Spain and 1 Italy and so on.

var singlemap = $('#singleMap').vectorMap({
    map: 'world_en',
    backgroundColor: null,
    color: '#eaeaea',
    hoverOpacity: 0.7,
    //selectedColor: '#666666',
    enableZoom: false,
    showTooltip: true,
    values: {

    },
    scaleColors: ['#6FC6EA', '#0A4D70'],
    normalizeFunction: 'polynomial'
});

I'm using setValues as below for reloading data, how can I clear data from map before showing new?

singlemap.setValues(mapstringJSON);

Upvotes: 0

Views: 1065

Answers (3)

gontak
gontak

Reputation: 1

I change :

$('#singleMap').empty();

to:

$('.singleMap').empty();

it works. it's because my singleMap is not declared as an ID

<div class="singleMap" style="width: 800px; height: 500px"></div>

Upvotes: 0

Pedro
Pedro

Reputation: 828

Yes. $('#singleMap') refers to an element having 'singleMap' as id, like

<div id="singleMap"></div>

$('.singleMap') refers to an element having 'singleMap' as a class, like

<div class="singleMap"></div>

Upvotes: 0

user3399805
user3399805

Reputation: 49

I found solution, on each setvalue i empty the html in div and set singlemap to null and then initialize the map again, before seting values.

$('#singleMap').empty();
singlemap = null;
singlemap = $('#singleMap').vectorMap({
  map: 'world_en',
  backgroundColor: null,
  color: '#eaeaea',
  hoverOpacity: 0.7,
  enableZoom: false,
  showTooltip: true,
  values: {},
  scaleColors: ['#6FC6EA', '#0A4D70'],
  normalizeFunction: 'polynomial'
});
singlemap.setValues(mapstringJSON);

Upvotes: 2

Related Questions