Jvectormap hovering displays the province name twice

Question

So I am implementing a jvectormap of The Netherlands and now I get a double nametag of the province when I hover the map.

IN HTML

 <div id="worldMap" style="height: 385px;"></div>

IN COMPONENT

var mapData = {
        "NL-ZH": 100000
    };
    $('#worldMap').vectorMap({
        map: 'nl_mill',
        backgroundColor: "transparent",
        zoomOnScroll: false,
        regionStyle: {
            initial: {
                fill: '#e4e4e4',
                "fill-opacity": 0.9,
                stroke: 'none',
                "stroke-width": 0,
                "stroke-opacity": 0
            }
        },

        series: {
            regions: [{
                values: mapData,
                scale: ["#AAAAAA","#444444"],
                normalizeFunction: 'polynomial'
            }]
        },
    });

As you can see below twice a jvectormap-tip is generated.

Hopefully someone can help me.

BREAKTHROUGH:

Apparently 3 label instances are made. 0 is the left one, 1 is the right one, and 2 is also the left one but they overlap each other. All I need to know now is how to delete 2 of those instances. The code is used to look at the objects. I can change it here but setting label1 to null and pop(), both do not work.

     onRegionTipShow: function (event, label, code) {
      console.log(label)
    },
});

no, just one instance. but for some reason the map i load in also has a label. — Lars Hendriks, Oct 01 '18 at 07:44

deblocker · Answer 1 · 2018-10-01T08:52:38.193

Looking at the jVectorMap source code, the tip is created inside the map constructor:

jvm.Map = function(params) {
   ...
   this.createTip();
   ...
}

I believe the map is for some reasons created more than once, but this is just guessing, because You mentioned the angular component.

You can either:

Add the remove method to Your component and invoke the map remove method:

$("#worldMap").vectorMap('get','mapObject').remove();

...because this will remove also the tip:

/**
  * Gracefully remove the map and and all its accessories, unbind event handlers.
*/
remove: function(){
  this.tip.remove();
  this.container.remove();
  jvm.$('body').unbind('mouseup', this.onContainerMouseUp);
}

Moreover, I would use something like this to clean-up the map:

function removeMap() {
  var mapObj = $("#worldMap").vectorMap('get','mapObject');
  if (typeof mapObj.remove !== 'undefined')  {
    mapObj.remove();
    $("#worldMap").contents().remove();
  }
}

You can patch the jVectorMap source code to append the tip to the map container, not the body (also if You are using more than one map in Your page).

Replace this line inside jVectorMap:
```
//this.tip = jvm.$('<div/>').addClass('jvectormap-tip').appendTo(jvm.$('body'));
this.tip = jvm.$('<div/>').addClass('jvectormap-tip').appendTo(this.container);
```

thanks for commenting i just solved the issue look above. i have no idea if yours does the same. but the problem is that i do not use any of this code. i do not generate the tips myself. the npm package does that for me. and i wanted just once to stay left and it looks like your code removes it all. — Lars Hendriks, Oct 01 '18 at 08:07
No worries, I never thought You are generating the tips by yourself. I edited my answer to be more clear. Please, pay attention that also the `mouseup` event is bound to the `body`. Maybe try to check it out. — deblocker, Oct 01 '18 at 08:56

score -1 · Accepted Answer · answered Oct 01 '18 at 08:03

-1

   onRegionTipShow: function (event, label, code) {
      console.log(label)
      label.splice(1,1);
      label.splice(2,1);
    },
});

if anyone ever has this issue.
with splice you can delete objects like these.

answered Oct 01 '18 at 08:03

Lars Hendriks

998
5
22

Jvectormap hovering displays the province name twice

2 Answers2