jVectorMap renders too small

Question

My jVectorMap isn't taking the new height I'm providing on the containing div and only renders at the default (?) height of 54px.

This is in a document.ready function in my scripts.js file:

$('#team-map-usa').vectorMap({
  map: 'us_lcc_en',
  backgroundColor: '#ffffff',
  hoverColor: '#999999',
  color: '#dddddd',
  normalizeFunction: 'polynomial',
  values: myData,
  scaleColors: ['#d0c4dc', '#d1b0eb', '#b296cb', '#47006b'],
  onLabelShow: function(event, label, code) {
    label.text(code);
  })
});

Containing div:

    <section id="top">
      <div id="team-map-usa" style="width: 600px; height: 400px;"></div>
    </section>

Documentation suggests that if I have a width and height set on the containing div, that should be applied to the created jVectorMap. The div is not hidden at any point (which I read here: Jvectormap very small on div change could be an issue) and $('#team-map-usa') clientHeight and clientWidth are both defined when the vectormap is initialized.

This is my first time using jVectorMap and I must be missing something. Any suggestions of how to make the map appear the right size?

Answer 1

If your not including the jquery-jvectormap-2.0.1.css on your page you need to style the content generated by jVectorMap.

In your case adding the following to you styles should do the trick

.jvectormap-container {
    height:100%;
    width:100%;
}

You can look at the http://jvectormap.com/css/jquery-jvectormap-2.0.1.css to hopefully find all the styles you need.

Answer 2

You have to include jquery-jvectormap-2.0.4.css on page to solve this issue. Just check if you have misspelled file name or you may have missed to add this on page.

Answer 3

When you trigger vectorMap() on element that has parent value to display: none it will render as extra small. So solutions is to use visibility: hidden rather that display: none

You can run this code and check if map resize to normal state:

window.dispatchEvent(new Event('resize'));

Answer 4

This is not the answer, but may be helpful:

html, body, #mapa, #mapa_dos{ height: 100%; width: 100%; margin: 0; padding: 0; }

In the example that I'm handling, I have two maps with the id="mapa" and id="mapa_dos". The containers of the div are the html and body tags, so displays the maps in the entire screen.