Having issue where tiles aren't loaded when used in a bootstrap tab until window is resized/refreshed about angular-leaflet-directive HOT 17 CLOSED

Here's some additional discussion on the github page for Leaflet:

Leaflet/Leaflet#941

Seems the display:none behavior used in the tabs might be contributing to the problem.

from angular-leaflet-directive.

strangely, I cannot reproduce this in my FF. What browser are you using?

from angular-leaflet-directive.

I am using the latest version of Chrome, but I see the same behavior in FF and IE 10 (at least with the code I've written). If it helps the page I've written is here:

http://www.sstorie.com/#/Ragnar/

...and when you go there you then click on the 'Training' tab to see the content with the map. What I've found is if I load the tab with the map first it works fine. However, if I load up another tab first (like using the link above), and then switch to the tab with the map it doesn't display properly until the window resized/refreshed. Here's a screenshot using FF just to add a reference:

http://i.imgur.com/2TTlZuo.png

from angular-leaflet-directive.

I've been seeing somewhat the same issue in my application.

I haven't used Angular that long either, but if there was some way to manually trigger stuff on a directive, one might be able to call the "map.invalidateSize()" and make it appear correct (as suggested here: Leaflet/Leaflet#941 (comment)).

Or is there some event that the directive itself can listen to and then do that?

Update
I re-read the initial issue description and saw that @sstorie suggested something similar to my idea.

from angular-leaflet-directive.

OK, I can reproduce it now .

Um... I will take some time to play with it this weekend ;p

from angular-leaflet-directive.

houqp,

I'm curious if you had a chance to investigate this further? I am now using your leaflet directive on multiple tabs, so I'm hopeful we can come up with a solution or work-around here.

In the interim I had set the tab with the map to be 'active' by default so that a refresh wasn't needed, but that's not really an option for me anymore.

-Sam

from angular-leaflet-directive.

Hi @sstorie and @ManneW , sorry for the late response. I am still not sure whether it is a good idea to expose the map object right now. But if you really need it, you can check out my demo:
houqp@b875d14

I will open a new issue to discuss the map object exposure issue.

The best solution for this issue is waiting for fixes from upstream

from angular-leaflet-directive.

I have a solution, just do a ng-switch...

from angular-leaflet-directive.

@fitouss At the risk of sounding really dumb...can you please say more about how ng-switch helps solve this problem? Are you suggesting it be used in place of the tabs?

from angular-leaflet-directive.

@houqp Thanks for the example, but I'm still trying to wrap my head around where to put the code that accesses the 'map' object. I'm learning more about how scope works within Angular directives, but I ran into an situation where if I had two leaflet maps within the same parent scope, and it wasn't clear to me what happens in a case like that:

// In my parent scope
<leaflet center="london" markers="markers" map="londonMap"></leaflet>
<leaflet center="newyork" markers="markers" map="newyorkMap"></leaflet>

// and then line 43 from the directive executes this...
$scope.map = map

Since we're passing in a different map object from the parent scope, does the $scope.map = map statement assign the map object to what was passed in, or to an object called map in the original parent scope?

Sorry if I'm not explaining this properly...I'm still trying to learn all of this :)

from angular-leaflet-directive.

the $scope.map object lives in directive's scope, so it should be safe. I didn' t test it, so let me know if I am wrong though ;p

from angular-leaflet-directive.

Now map object can be manipulated with leafletDirectiveSetMap event, see:
https://github.com/tombatossals/angular-leaflet-directive/blob/master/test/unit/directivesSpec.js#L193

from angular-leaflet-directive.

I've struck this issue. @houqp I went looking for leafletDirectiveSetMap however it seems to have been removed from the code. What is the current way to force a redraw of the map (e.g. call map.invalidateSize())

from angular-leaflet-directive.

Found the solution here: #168 (comment)

from angular-leaflet-directive.

I cannot seem to make this work I already used invalidateSize() when transferring to my tab using the same code in
#168 (comment)

from angular-leaflet-directive.

in your directive do this...

$timeout(function () {
map.invalidateSize();
});

$timeout without a delay seems to invoke the callback after the directive is rendered.

from angular-leaflet-directive.

invalidateSize() works well for me, just need to re-run my mapBounds function at the same time. Adding on from the demo code:

$scope.$watch("mapView", function(value) {
        console.log($scope.mapView);
        if (value === true) {
            leafletData.getMap().then(function(map) {
              $timeout(function() {
                map.invalidateSize();
                //create bounds
                leafletData.getMap().then(function (map) {
                    if ($scope.mapBounds.length < 1){$scope.mapBounds.push([$scope.location.coords.longitude,$scope.location.coords.latitude])}
                    var bbox = L.latLngBounds($scope.mapBounds);
                    $scope.maxBounds.southWest = bbox.getSouthWest();
                    $scope.maxBounds.northEast = bbox.getNorthEast();
                    map.fitBounds(bbox);
                });
              }, 300);
            });
        }
    });

from angular-leaflet-directive.