SVG is always small

[hfabio]

I've tried so hard to change its size, but there is no way. The map svg always starts with height 88 and I realize if you open the console and close it will grow (?) I got a real weird behavior, anyone else?

When start:

my implementation:

<div style={{ width: 1200, height: 700 }}>
                  <VectorMap
                    map={"world_mill"}
                    backgroundColor="#ccc"
                    zoomOnScroll={true}
                    containerStyle={{
                      width: 1068,
                      height: 700
                    }}

                    onRegionTipShow={function (evt, fn, country) { evt.preventDefault(); setHoverLabel(fn.html() + (woldData[country] ? ':  <span class="badge badge-primary">' + woldData[country] + '</span>' : ':  <span class="badge badge-warning">0</span>')) }}
                    containerClassName="map"
                    regionStyle={{
                      initial: {
                        fill: "#e4e4e4",
                        "fill-opacity": 0.9,
                        stroke: "none",
                        "stroke-width": 0,
                        "stroke-opacity": 0
                      },
                      hover: {
                        "fill-opacity": 0.8,
                        cursor: "pointer"
                      },
                      selected: {
                        fill: "#2938bc" //color for the clicked country
                      },
                      selectedHover: {}
                    }}
                    regionsSelectable={true}
                    series={{
                      regions: [
                        {
                          values: woldData, //this is your data
                          scale: Array.from(Object.values(colors)).splice(0, 5),
                          normalizeFunction: "polynomial"
                        }
                      ]
                    }}
                  />
                </div>

[kadoshms]

Hey there, can you confirm that this is a library issue?

[hfabio]

I can't say exactly if it is, but I'm looking for one solution... I "solved" it by using this

useEffect(() => {
    setInterval(() => {
      if (document.querySelector('.jvectormap-container')) {
        let chart = document.querySelector('.jvectormap-container').firstChild;
        if (Number(chart.getAttribute('height')) !== 600) {
          console.log('setting chart size');
          chart.setAttribute('height', 600);
        }
      }
    }, 5);
  }, []);

now the map zoom level starts small and everytime that I hover a country the zoom goes away...

[hfabio]

wasn't a library issue, but for information purpose I realized the container div created by the lib main hasn't a size defined so it created a inconsistency. To solve it I created an .css file and imported inside the component with this class modification:

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

[dylan-13]

@hfabio you can trigger the svg inside the div like so :

svg { height: 400px; }