CODEWITHSUNDEEP
angularangular6jvectormapjqvmap
Lars Hendriks
Lars Hendriks

Reputation: 1058

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

Upvotes: 2

Views: 651

Answers (2)

deblocker
deblocker

Reputation: 7697

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

Upvotes: 1

Lars Hendriks
Lars Hendriks

Reputation: 1058

   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

Upvotes: -1

Related Questions