title: Leaflet map completely grey programmatically opening a popup tofa marker
body: <p>I declare a leaflet map with </p>
  
  <pre><code>&lt;div id="map"  class="map-div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>end initialize it with </p>
  
  <pre><code>    var map = L.map('map').setView([51.178882, -1.826215],16);
      $scope.map = map;
  
      // OSM Mapnik
      var osmUrl = "&lt;a href='http://www.openstreetmap.org'&gt;Open StreetMap&lt;/a&gt;";
  
      L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              attribution: '&amp;copy; ' + osmUrl,
              maxZoom: 18,
          }).addTo(map);
  </code></pre>
  
  <p>I grab some data from my server, and and markers to the map, in a loop, by calling this function (it's AngularJS, but I doubt that that plays a role):  </p>
  
  <pre><code>$scope.AddMarkerToMap = function(companyData, index, array)
  {
      var companyName = companyData.company_name;
      var latitude = companyData.latitude;
      var longitude = companyData.longitude;
      var cssClassname = 'comapny_has_no_present_workers';
  
      if (companyData['currentWorkers'] &gt; 0)
          cssClassname = 'comapny_has_present_workers';
  
      var pubLatLng = L.latLng(latitude,longitude);
  
      // see https://leafletjs.com/reference-1.4.0.html#marker
      var marker = L.marker(pubLatLng,
          {
              // this is the tooltip hover stuff
              title: companyData['currentWorkers'] + ' current matches ' + companyData['previousWorkers'] + ' previous matches',
  
              // see https://leafletjs.com/reference-1.4.0.html#icon
              // this is a permanent label.
              icon: new L.DivIcon({
                  className: cssClassname,
                  ////html: '&lt;img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/&gt;'+
                  ////    '&lt;span class="my-div-span"&gt;RAF Banff Airfield&lt;/span&gt;'
                  html: '&lt;span&gt;' + companyName + '&lt;/span&gt;'
              })
          }).addTo($scope.map);
  
      // see https://leafletjs.com/reference-1.4.0.html#popup
      marker.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.").openPopup();
  
  };      // AddMarkerToMap()
  </code></pre>
  
  <p>And the entire map is suddenly grey - with no problems reported in the developer console.</p>
  
  <p>If I comment out the line  </p>
  
  <pre><code>    marker.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.").openPopup();
  </code></pre>
  
  <p>then everything displays as expected.</p>
  
  <p>The code seems correct, as per <a href="https://leafletjs.com/examples/quick-start/" rel="noreferrer">the Leaflet documentation</a>. </p>
  
  <p>[Updtae] I just checked and if I only <code>marker.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.")</code>, the the map displays and I can click on the marker to display the popup. But when I try to programmatically open it with <code>.openPopup();</code> the map is all grey.</p>
  
  <p>[Update++] the map and its markers display just fine, with any one of   </p>
  
  <pre><code>marker.bindPopup("&lt;b&gt;Hello world!&lt;/b&gt;&lt;br&gt;I am a popup.");
  $scope.map.fitBounds(bounds, {padding: [50, 50]});
  </code></pre>
  
  <p>but with both, the map is grey :-(</p>
  
  <p>What am I doing wrongly?</p>