Only one map instance being displayed

[vishal-kony]

I have 2 <div> (one remains hidden unless I click a button). The 2 <div> are getting populated with the map however, one of the map has its <svg> tag with 0 width and height (please see the image)

why is this happening? I have tried swapping the two <div> but then I can see world map but not the US map. Any resolution to this?

[markmarkoh]

@vishal-kony Datamaps tries to maximize it's size basic on it's container <div>. If that <div> is not visible, the width/height will be 0.

To offset this you can specify a height and width when you create the map, like:

var map = new Datamap({
  element: document.getElementById('world_map'), 
  height: 500,
  width: 500
})

Can you give that a shot and see if the tabs work better?

[vishal-kony]

@markmarkoh Thanks for a quick reply. I can now see the maps properly on the tabs, But upon window re-size, The map that is currently active gets re-sized but, upon switching the tab, I cant see the other map. Is it because i have a common map re-size for both the maps? Can you confirm on that?

[vishal-kony]

Here's my map generating code. Common for both the US and world map. As mentioned before the re-size here re-sizes only the map that is currently active. The other map disappears on resize

var map = new Datamap({
        scope: scope,
        element: document.getElementById(div_id),
        height: 250,
        width: document.getElementById('usa_map').offsetWidth,
        responsive: true,
        fills: {
            'low': '#80CBC4',
            'medium': '#26A69A',
            'high': '#00897B',
            defaultFill: '#E0F2F1'
        },
        data: goodToGoData,
        geographyConfig: {
            highlightBorderColor: '#ff0027',
            popupTemplate: function (geography, data) {
                var initial = 0;
                if (data != null) {
                    initial = data.value;
                }
                return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong><br>' + 'Sessions : ' + initial + '</div>';
            },
            highlightBorderWidth: 2
        }
    });

    window.addEventListener('resize', function () {
        map.resize();
    });