title: Map sometimes doesn't load at first
body: <p><strong>Edit:</strong> Invoking these two methods directly on the map object solved the issue:</p>
  <pre><code>leafletData.getMap().then(function(map)
  {
      map.invalidateSize();
      map._onResize();
  });
  </code></pre>
  <p>I have a little, yet pretty irritating issue with Leaflet directive for AngularJS (<a href="https://github.com/angular-ui/ui-leaflet" rel="nofollow noreferrer">https://github.com/angular-ui/ui-leaflet</a>) and Google Maps plugin (<a href="https://github.com/shramov/leaflet-plugins" rel="nofollow noreferrer">https://github.com/shramov/leaflet-plugins</a>).</p>
  <p>For some reason, sometimes markers load with no problems, yet no map is being shown. Refreshing the website helps but it isn't a solution...</p>
  <p>Screenshots attached (taken on my phone but it happens on desktop browsers too):</p>
  <p><a href="https://i.stack.imgur.com/nONjB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nONjB.png" alt="image 1" /></a></p>
  <p>Sometimes the map loads after a moment but with no bounds set:</p>
  <p><a href="https://i.stack.imgur.com/OGeOG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OGeOG.png" alt="image 2" /></a></p>
  <p>How it should look like (and most of the time does):</p>
  <p><a href="https://i.stack.imgur.com/rXmnk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rXmnk.png" alt="image 3" /></a></p>
  <p>View:</p>
  <pre><code>&lt;div class=&quot;stations-map&quot; ng-controller=&quot;mapCtrl&quot; ng-show=&quot;mapObj.visible&quot;&gt;
          &lt;leaflet layers=&quot;mapObj.layers&quot; lf-center=&quot;mapObj.center&quot; bounds=&quot;mapObj.bounds&quot; markers=&quot;mapObj.markers&quot; height=&quot;480px&quot; width=&quot;100%&quot;&gt;&lt;/leaflet&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Controller:</p>
  <pre><code>app.controller(&quot;mapCtrl&quot;, ['$scope', '$filter', 'propertyService', 'groupService', 'leafletBoundsHelpers', function ($scope, $filter, propertyService, groupService, leafletBoundsHelpers){
  var properties = null;
  
  var mapObj = {
  
      center: {},
      bounds: [],
      markers: {},
  
      layers: {
  
          baselayers:
          {
              googleRoadmap: {name: 'Google Streets', layerType: 'ROADMAP', type: 'google'}
          }
  
      },
  
      visible: false
  
  };
  
  var resetMap = function()
  {
      mapObj.center = {};
      mapObj.bounds = [];
      mapObj.markers = {};
  };
  
  var resetMapAndHide = function()
  {
      mapObj.center = {};
      mapObj.bounds = [];
      mapObj.markers = {};
      mapObj.visible = false;
  };
  
  var setMarkerMessage = function(res,item,property)
  {
      var location = item.location.name;
      var value = null;
      var value_unit = null;
  
      if(res.data[item.id] == undefined)
      {
          return &quot;&lt;div id='popup-container'&gt;&lt;div id='popup-value'&gt;-&lt;/div&gt;&lt;div id='popup-location'&gt;&quot; + location + &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
      }
      else if(properties[item.property].name == 'PM')
      {
          value = $filter('number')(res.data[item.id].value['PM2.5'], 2);
          value_unit = &quot; µg/m³&quot;;
  
          return &quot;&lt;div id='popup-container'&gt;&lt;div id='popup-value'&gt;&quot; + value + value_unit + &quot;&lt;/div&gt;&lt;div id='popup-location'&gt;&quot; + location + &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
      }
      else if(properties[item.property].name == 'pressure')
      {
          value = $filter('number')(res.data[item.id].value[property.name]/100, 2);
          value_unit = property.string_format.replace((/{(.*)}/.exec(property.string_format))[0],'');
  
          return &quot;&lt;div id='popup-container'&gt;&lt;div id='popup-value'&gt;&quot; + value + value_unit + &quot;&lt;/div&gt;&lt;div id='popup-location'&gt;&quot; + location + &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
      }
  
      value = $filter('number')(res.data[item.id].value[property.name], 2);
      value_unit = property.string_format.replace((/{(.*)}/.exec(property.string_format))[0],'');
  
      return &quot;&lt;div id='popup-container'&gt;&lt;div id='popup-value'&gt;&quot; + value + value_unit + &quot;&lt;/div&gt;&lt;div id='popup-location'&gt;&quot; + location + &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
  };
  
  var setNorthE = function(northE,item)
  {
      if ( (northE.lat == null) || (northE.lat &lt; item.location.latitude) )
      {
          northE.lat = item.location.latitude;
      }
  
      if ( (northE.lng == null) || (northE.lng &lt; item.location.longitude) )
      {
          northE.lng = item.location.longitude;
      }
  };
  
  var setSouthW = function(southW,item)
  {
      if ( (southW.lat == null) || (southW.lat &gt; item.location.latitude) )
      {
          southW.lat = item.location.latitude;
      }
  
      if ( (southW.lng == null) || (southW.lng &gt; item.location.longitude) )
      {
          southW.lng = item.location.longitude;
      }
  };
  
  $scope.mapObj = mapObj;
  
  propertyService.getProperties().then(function(response)
  {
      properties = response;
  });
  
  $scope.$on('group-chosen', function(event,id)
  {
      var groupData = null;
  
      resetMap();
  
      groupService.getGroupById(id).then(function(response)
      {
          return response.data;
  
      }).then(function(response)
      {
          groupData = response;
  
          return groupService.getGroupSensorValues(id);
  
      }).then(function(response)
      {
          var groupProperty = properties[groupData.property.id];
  
          var northE =
          {
              lat: null,
              lng: null
          };
  
          var southW =
          {
              lat: null,
              lng: null
          };
  
          var i = 0;
  
          angular.forEach(groupData.sensors, function(item)
          {
              // add markers
              if ( (item.location.latitude !== null) &amp;&amp; (item.location.longitude !== null) )
              {
                  mapObj.markers['m'+i] = {};
                  mapObj.markers['m'+i]['lat'] = item.location.latitude;
                  mapObj.markers['m'+i]['lng'] = item.location.longitude;
  
                  mapObj.markers['m'+i]['icon'] = {
  
                      type: 'div',
                      iconSize: [25,25],
                      className: 'divCircle'
  
                  };
  
                  mapObj.markers['m'+i]['getMessageScope'] = function()
                  {
                      return $scope;
                  };
  
                  mapObj.markers['m'+i]['message'] = setMarkerMessage(response,item,groupProperty);
                  mapObj.markers['m'+i]['compileMessage'] = true;
  
                  mapObj.markers['m'+i]['popupOptions'] = {
                      closeButton: false
                  };
              }
  
              setNorthE(northE,item);
              setSouthW(southW,item);
  
              i++;
          });
  
          var bounds = [];
          var northEast = [];
          var southWest = [];
  
          // temporary map's padding
          northEast.push(northE.lat+0.0001, northE.lng+0.0001);
          southWest.push(southW.lat-0.0001, southW.lng-0.0001);
  
          bounds.push(northEast,southWest);
  
          mapObj.bounds = leafletBoundsHelpers.createBoundsFromArray(bounds);
      });
  
      mapObj.visible = true;
      $scope.mapObj = mapObj;
  });
  
  $scope.$on('station-chosen', function()
  {
      resetMapAndHide();
      $scope.mapObj = mapObj;
  });
  
  $scope.$on('data-switched', function()
  {
      resetMapAndHide();
      $scope.mapObj = mapObj;
  });}]);
  </code></pre>
  <p>Thanks in advance for any suggestions!</p>