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 works but the map is tiny, even though the position of the zoom buttons indicates the size of the div is how it should be.

Any ideas?

If I have both divs set to "block" from the start they are both the correct size, it's only when invoking code to switch the div that 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';
  }

Answer 1

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 2

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

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

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