jVectorMap renders too small

C

4

7

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?

Craiova answered 13/11, 2014 at 7:42 Comment(1)

Did you ever resolve this issue? I'm having the same problem... – Capparidaceous 30/1, 2015 at 21:25

L

10

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.

Liggitt answered 2/12, 2014 at 13:3 Comment(1)

For me the solution was to include the jquery-jvectormap...css correctly in the page! I misspelled it. E.g. I was missing this in my the <head> of my HTML: <link rel="stylesheet" media="all" href="bower_components/jvectormap202/dist/css/jquery-jvectormap-2.0.2.css"></script> I was using this Bower variant. – Disfeature 15/9, 2015 at 11:51

B

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.

Bipinnate answered 15/9, 2015 at 12:57 Comment(0)

F

2

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

Foreshow answered 19/8, 2019 at 12:36 Comment(0)

I

0

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.

Impressible answered 26/11, 2014 at 20:5 Comment(0)

Recommended topics

Hot tags