I'm facing a problem. I've downloaded https://github.com/eknuth/ionic-angular-cordova-leaflet-seed github, as a good start point to ionic with leaflet maps, but as soon as I change <nav-view></nav-view> by <ion-nav-view></ion-nav-view> it just stops working.
Most of the issues go away. The issues are when loading the map page then going to another page and returning, double-click to zoom, the entire map goes blank with no errors in the console.
Any ideas what might be the issue? At the moment I’m OK with the work around as I still have a header with the stripped ion-content and I just bumped the map’s top:50px to accommodate.
Calendee, you’re a work horse on this forum. Kudos~great work.
Yeah, I saw the cata_rock post before submitting mine. At that time, I tried the bower update and things seem to have gotten worse.
For the time I going with no ion-content. I don’t see a downside at this point. If someone has some insight as to why this behaves this way, I would like to know.
i having no luck at all with leaflet, even trying all of the tricks mentioned in this thread; has anyone had luck using Google Maps? Hat to rip out leaflet, but I have spent all day hacking at this with no success.
Also I had to comment out some code on ionic.js, the part that handles “ghost clicks”
/*document.addEventListener('touchend', removeClickPrevent, false);
document.addEventListener('mouseup', removeClickPrevent, false);
// in the case the user touched the screen, then scrolled, it shouldn't fire the click
document.addEventListener('touchstart', recordStartCoordinates, false);
document.addEventListener('mousedown', recordStartCoordinates, false);*/
Thanks for the feedback, my specific issue is that I am using the directive with Tabs. It works fine by itself but issues start when the directive is used twice.
I was having problems yesterday with using leaflet and ion-nav-view, more specifically when there is any animation to/on a page containing a leaflet map the leaflet controls no longer functioned.
This looks like it has been fixed by the latest nighty build.
That is one awesome well maintained project which you can plug and play in your Angular projects. I’ve been using it for a couple of weeks now and it’s very powerful.
@Calendee, we went live with our app in just 3 weeks. I just submitted our “Sun-n-Fun Find It!” app to the Ionic Showcase. Thanks for all your help!
I did find what was preventing the Leaflet map markers from responding to a tap which prevented opening/closing marker popups. Ionic’s preventGhostClick(e) method was sending back a false positive. Specifically, isScrolledSinceStart(e) was returning true on a tap on the map.
Due to time constraints, we put in a nasty hack to prevent this method from being called when the map was active. Also due to time, we opted for straight Leaflet and not the Leaflet-Angular directive to avoid untested unknowns.
Hope this helps others.
I submitted the issue here.
When you navigate to the view that contains the map, the zoom controls don’t work. This is extensible to any clickable layer/marker you add to the map. You lose all interaction capabilities with the map excluding (so far tested) the doubleclick zoom, pinch zoom and drag pan.
As far as I have been able to debug this problem. It seems that the initialization of Leaflet is quite different if the initial view contains the map itself. All the needed eventListeners for click events are successfully registered onto markers and buttons but in the codepen example, half the initialization is done when the page is loaded and then, when navigating to the view with the map, no click events are registered on the zoom controls, for example.