Search code examples
angularangular6jvectormapjqvmap

Jvectormap hovering displays the province name twice


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.

enter image description here

Hopefully someone can help me.

BREAKTHROUGH:

enter image description here

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)
    },
});

Solution

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

    enter image description here

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

    enter image description here