Take the 2-minute tour ×

So I have 2 wrappers one that has a highchart and the other one has a leaflet map. Im using buttons to toggle the divs in and out. The chart div works fine but the map one I have to click the the button twice to get it to render. I tried to put a setTimer() to see if would help with the transition but nothing. I have a fiddle that illustrates what Im trying to do but its having an issue with the map here. My question is why it wont render right away? and What can I do to make it render right away? Thanks

share|improve this question

1 Answer 1

up vote 0 down vote accepted

You are rendering the chart in container and the container has both the map and chart so after rendering the chart your map div removed from container so it creates problem.

Note: you have given container id to div twice

Replace your HTML like

<div id="maincontainer">
    <div id="chart-wrapper" style="display:block; overflow: auto;">
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
  <div id="map-wrapper" style="overflow: auto; display: none;">
        <div id="map-container" style="height: 400px; "></div>

<button id="toggle-btn">Map</button>
<button id="run-btn">run</button>

Fiddle http://jsfiddle.net/QBYPH/2/

share|improve this answer

Your Answer


