map doesn't load when set display none initially

[Hedwig188]

Hi, I found that if I set the outside div to display none initially, then using js to redisplay the map, the map doesn't show up. And ideas? Thanks.

[markmarkoh]

@Hedwig188 did you find the cause?

[Hedwig188]

Not yet.

[markmarkoh]

It says you closed the issue, if you'd like you could reopen it and send me JSBin or JSFiddle of this issue and I can help debug

[Hedwig188]

@markmarkoh I do something like this in PHP:

print "<div id="container1"></div>
<script>
                            var map = new Datamap({
                                element: document.getElementById('container1'),
                                scope: 'usa',
                                fills: {
                                    HIGH: 'rgb(15,67,127)',
                                    LOW: 'rgb(106,175,255)',
                                    MEDIUM1: 'rgb(29,134,255)',
                                    MEDIUM3: 'rgb(39,80,127)',
                                    MEDIUM2: 'rgb(23,107,204)',
                                    UNKNOWN: 'rgb(222,235,247)',
                                    defaultFill: 'rgb(222,235,247)'
                                },
                                data: {";
                                    foreach($stateArray as $k=>$v){
                                        if($v == 0) $mapFill = "defaultFill";
                                        else if($v>=1&&$v<10) $mapFill = "LOW";
                                        else if($v>=10&&$v<50) $mapFill = "MEDIUM1";
                                        else if($v>=50&&$v<100) $mapFill = "MEDIUM2";
                                        else if($v>=100&&$v<200) $mapFill = "MEDIUM3";
                                        else if($v>200) $mapFill = "HIGH";
                                        print "'".$k."':{fillKey:'".$mapFill."',
                                                      numberOfThings:".$v."
                                                     },";
                                    }                

                             print "
                                },   
                                geographyConfig: {
                                                    popupTemplate: function(geo, data) {
                                                        return ['<div class=".$hoverinfo."><strong>',
                                                                geo.properties.name,'</strong><br><strong>',
                                                                'Number of people registered' + 
                                                                ': ' + data.numberOfThings,
                                                                '</strong></div>'].join('');
                                                    },
                                                    highlightFillColor: 'rgb(236,37,41)',
                                                    highlightBorderColor: 'rgb(236,37,41)',
                                                    highlightBorderWidth: 2
                                                }
                            });
                        </script>";

In the external CSS file, I set #container1{display:none} initially. And I add a button for show the container when needed. However, in this way the map didn't show up. So I changed to another way which replaced 'display:none' with '$('#conatiner1').hide("fast")'. But the element shows up once before it hides. Any idea with this? Thank :)

[riccardov]

hi, I have the same issue printing the map inside an hidden tab of a bootstrap's tabpanel

[workgena]

Did you try something like this ?

$( ".tab_selector" ).on("tabsactivate", function(event, ui){
  map.resize(); // variable map should be available here
});

[darrenmcn]

I have the same issue @riccardov. Have you found any solution? @workgena Tried that, no luck.

[riccardov]

I resolved printing the second map only when I click on the corresponding tab:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    if(e.target.innerText.indexOf("label of the tab") > -1) {
      // create here the new map
    }
});

I use a bool to check if I've already created the map before (so I create it only on the first click on the tab)

[darrenmcn]

@riccardov I haven't been able to get your solution to work. Can you have a look at this Plunker .. I can get the map to load outside of the tabs but not inside.

[workgena]

@riccardov is right. I took his idea and write an example with two maps.

http://jsfiddle.net/zonrszmy/3/

Also played with jQuery UI Tabas http://jsfiddle.net/ja1kk77n/

[darrenmcn]

Thanks @ramnathv @riccardov that worked :+1:

[markmarkoh]

@workgena I can get yours to work when I update the version of Datamaps: http://jsfiddle.net/6gb0gma4/

I always prefer users to supply their own copy of Datamaps (like through bower/npm) until I can get it on a JS CDN, but here is an updated version nonetheless: http://datamaps.github.io/scripts/0.4.0/datamaps.world.js

[markmarkoh]

@darrenmcn It looks like you might have the issue fixed, but here is a version of your plunker that works:

http://plnkr.co/edit/CTiyl17v0WwzgppB7LDt?p=preview

I specify height and width so Datamaps doesn't try to guess it from the container (which isn't visible at the time of rendering)

[getup8]

For future visitors, if using Bootstrap or Foundation toggles, just because the plunker example isn't all that straightforward, all you need to do is specify the height and width properties when you instantiate your Datamaps and all maps should render.