title: Mapbox resizing
body: <p>I am trying to resize a map after adjusting the size of it's container. The map does not adjust after calling <code>invalidateSize()</code>. In this example I want the map to shrink to the new container size. I have made a simple test case with Angular:</p>
  
  <p>Index.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid" ng-controller="testCtrl"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12" ng-class="{'smaller': timedOut}"&gt;
              &lt;mapbox map-id="jonfor.cifpucu09j2jos4m7h7dts4ek"&gt;&lt;/mapbox&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>testController.controller('testCtrl', ['$scope', 'mapboxService', '$timeout', function ($scope, mapboxService, $timeout) {
      mapboxService.init({accessToken:'pk.eyJ1Ijoiam9uZm9yIiwiYSI6ImNpZnB1Y3Y0OGh0NnJyN2x4OHFqNzdoajUifQ.vg3xNMJH-RgzRAZF7RzhzQ'});
      $timeout(function() {
          $scope.timedOut = true;
          var map = mapboxService.getMapInstances()[0];
          map.invalidateSize();
          console.log("Timeout");
      }, 3000);
  }]);
  </code></pre>
  
  <p>App.css:</p>
  
  <pre class="lang-css prettyprint-override"><code>.smaller {
      width : 100px;
  }
  </code></pre>
  
  <p>I also have put the project up on GitHub: <a href="https://github.com/Jonfor/MapBoxTest" rel="nofollow">https://github.com/Jonfor/MapBoxTest</a></p>