Leaflet map completely grey programmatically opening a popup tofa marker

Question

I declare a leaflet map with

<div id="map"  class="map-div"></div>

end initialize it with

    var map = L.map('map').setView([51.178882, -1.826215],16);
    $scope.map = map;

    // OSM Mapnik
    var osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";

    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + osmUrl,
            maxZoom: 18,
        }).addTo(map);

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):

$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'] > 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: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
                ////    '<span class="my-div-span">RAF Banff Airfield</span>'
                html: '<span>' + companyName + '</span>'
            })
        }).addTo($scope.map);

    // see https://leafletjs.com/reference-1.4.0.html#popup
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

};      // AddMarkerToMap()

And the entire map is suddenly grey - with no problems reported in the developer console.

If I comment out the line

    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

then everything displays as expected.

The code seems correct, as per the Leaflet documentation.

[Updtae] I just checked and if I only marker.bindPopup("<b>Hello world!</b><br>I am a popup."), the the map displays and I can click on the marker to display the popup. But when I try to programmatically open it with .openPopup(); the map is all grey.

[Update++] the map and its markers display just fine, with any one of

marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
$scope.map.fitBounds(bounds, {padding: [50, 50]});

but with both, the map is grey :-(

What am I doing wrongly?

What happens if you resize your browser while the map is grey? — ghybs, May 02 '19 at 18:39
Easily check whether you are in that situation or not: https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 — ghybs, May 04 '19 at 03:03
I have updated the question. please take a look. at the end Thanks — Mawg says reinstate Monica, May 05 '19 at 09:06
Can you provide details about how you "_[add] markers to the map, **in a loop**_"? — ghybs, May 06 '19 at 02:09
I just loop over some AJAX data which I got from my server and invoke `$scope.AddMarkerToMap` (see code above) for each marker. That works fine; the problem is only when I call both `marker.bindPopup()` ***and*** `$scope.map.fitBounds()` from that function. one work individually, but not whn I call both :-( — Mawg says reinstate Monica, May 07 '19 at 09:47

score 3 · Accepted Answer · answered May 08 '19 at 17:53

I think the issue comes from trying to change the map view (possibly through openPopup with autoPan, which is on by default) too often, typically in a loop without giving any delay for the map to actually set the view between each call.

IIRC, this is already identified as a limitation in Leaflet, but I could not find the exact thread in the issue tracker unfortunately.

Normally, a very simple fix is simply to remove the map view changes within your loop, and keep only the very last one.

In your case, if you have the default behaviour of only 1 Popup being opened at a time, then that would definitely be a valid solution: just open the popup of your last Marker.

If you did configure your map to keep several Popups open simultaneously, and you do want to open all of them through your loop, then make sure to disable autoPan (at least during your loop).

Well spotted. I had a big ***ToDo:*** comment telling me to move `$scope.map.fitBounds()` out off that function, which was being called in a loop & do it after all markers had been added. When I moved it, as you suggested, everything is just fine. Thanks :-) — Mawg says reinstate Monica, May 08 '19 at 18:31

Leaflet map completely grey programmatically opening a popup tofa marker

1 Answers1