Geek Answers Handbook

Jvectormap is very small when changing div

I have two divs, one with a world map and one with a USA map. When the USA clicks on the world map, I want to hide this div and display the USA map.

This works, but the map is tiny, although the position of the zoom buttons indicates that the size of the div should be what it should be.

enter image description here

Any ideas?

If I have both divs specified by "block" from the very beginning, they are both the correct size, this is only when the code is called to switch the div, which it fails.

onRegionClick: function(event, code){ if (code == "US") { openUS('us-map') } }, function openUS(a) { document.getElementById("world-map").style.display = 'none'; document.getElementById(a).style.display = 'block'; }
+6
source share
5 answers

This problem is caused by the fact that you initialize the map on a hidden element, the size of which cannot be correctly calculated at this time. Try changing your logic so that jVectorMap initializes after the element becomes visible.

+9
source

You can also cause resizing () in the container of this map after it is displayed.

I made an example in this post: Switch maps in Jvectormap?

+4
source

You can also add logic to your code when, when the container of your card is displayed, the code executes the updateSize method. In particular, it looks like this:

 $('$world-map').vectorMap('get','mapObject').updateSize();
+4
source

I had the same problem with jVectorMap's display size and found a way to display them correctly.

The problem is creating the map object. For it to display correctly, the vectorMap object must be visible when it is created. At the same time, when you put them in tabs, you should:

  • Click the first tab.
  • Create the first map.
  • Click the second tab.
  • Create a second card .. ..
    You can end up clicking on the first tab again so that it is active on the download page.

Hope this helps anyone who has the same issue.

+1
source

The problem is that the div with the US map is hidden, so it cannot correctly calculate the size (width) of the map. Instead, you can css the div to be height: 0.

I ran into this problem using Highcharts, same thing for jvectormap. Below code fixed the problem (using download):

 /* bootstrap hack: fix content width inside hidden tabs */ .tab-content > .tab-pane:not(.active), .pill-content > .pill-pane:not(.active) { display: block; height: 0; overflow-y: hidden; } /* bootstrap hack end */
+1
source

More articles:


All Articles