Comments (17)
Here's some additional discussion on the github page for Leaflet:
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.
Related Issues (20)
- Is there any support for offline map ? HOT 2
- Tiles error on load in Electron HOT 1
- $scope.path not working when click
- Having issue with tiles which are not being displayed when I want to print my leaflet map
- Central leaflet marker always when map moves
- Cannot read property 'innerText' of undefined at updatePopup
- zoomDelta and zoomSnap are not supported
- Map Not getting refreshed after changing dynamic map profile
- what are you think about convert this repo to new angular (5)?
- How to add simple custom-control to map
- how to override angular-leaflet-directive popup close button
- "The page can't load Google maps correctly"
- the version for angular JS is limited ?? or I can do all ?? as if i were use leftlet.js ????
- Any known issues related to WorldCopyJump w/ Leaflet 1.3.4? HOT 1
- How to draw markers snap to road on map ?
- Unable to load ExtraMarker Plugin HOT 1
- Helpful tip on compiling popup templates
- I can not use some characters in markers
- markers with special characters like dot HOT 1
- Is it possible to GEOJSON open popup by GET param in the url?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-leaflet-directive.