Jvectormap very small on div change

Question

I have two divs, one with the world map and one with the US map. When the USA is clicked on the world map I want to hide that div and bring the US map into view.

This wo

Answer 1

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

I encountered this issue using Highcharts, same for jvectormap. Below code fixed the issue (using bootstrap):

/* 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 */

Answer 2

This issue is caused by the fact that you initialize map on the hidden element, whose size can't be calculated properly at that time. Try to change your logic so that jVectorMap would be initialized after the element becomes visible.

Answer 3

You can also trigger a resize() on the container of that map after showing it.

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

Answer 4

I was having the same issue with jVectorMap display sizing and found a way to get them to display properly.

The problem is when you create your map object. For it to display properly, the vectorMap object must be visible when you create it. That being said, when you put them in tabs, you should:

1. Click first tab.
2. Create first map.
3. Click Second tab.
4. Create Second map.. ..
   You can eventually click the first tab again so it's the active one on the page load.

Hope this helps anyone having the same issue.

Answer 5

You also can add logic to your code that when container of your map appears code executes a method called updateSize. In particular this looks like:

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