Leaflet map and ion-nav-view

[manol]

Hello.

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.

Does anyboby have the same problem?

Thank you in advance.

[evoratec]

Update ionic to last version.

[coomsie_nz]

I’m using leaflet (grt maping lib btw) on an (latest) ionic framework … and all ok

that prefix was a a certain version that seed is v0.9.23 , you need .25 see this http://ionicframework.com/blog/ionic-directive-prefixes

[dezeloper]

I am having significant issues with either Google Maps or Leaflet with ion-content. If I go from this:

<ion-view title="{{title}}" left-buttons="leftButtons">
  <ion-content has-header="true" padding="true" >
    <div id="map-canvas"></div>
  </ion-content>
</ion-view>

To this:

<ion-view title="{{title}}" left-buttons="leftButtons">
    <div id="map-canvas"></div>
</ion-view>

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.

Jeff

[Calendee]

See if the comments from other maps users here help at alll

Using angular-google-maps inside side-menus

It looks like I’m doing something wrong, for me the viewState.viewEnter event is not triggering. I have my <view> elements inside divs because I use an ng-switch to load different “partials” depending on what I have to display. Something like this: <div ng-switch on="item.type"> <div ng-switch-when="page_content"> <div ng-include="'views/_default.html'"></div> </div> <div ng-switch-when="map"> <div ng-include="'views/_map.html'"></div> </div> <div ng-switch-when="form"> <…

Tabs persistance and google maps

I’m not a definitive source on this, but I don’t know that it can be done. With AngularJS controllers and views are destroyed when another view is loaded. Maybe read through this and see if there is any guidance, but I think they have essentially the same problem:

[dezeloper]

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.

Thanks,
Jeff

[aaronksaunders]

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.

[Calendee]

I’m not sure what trouble you are having, but that sample seems to work great for me.

I modified it just slightly so the resize buttons aren’t covered by the header.

Nice job.

[aaronksaunders]

As soon as you toggle between the screens, you no longer get click events on the map, try clicking on the zoom control

[eugi]

Not sure if this could help, but I could use leaflet in ion-content with overflow-scroll=“true” like:

<ion-content has-header="true" has-tabs="true" overflow-scroll="true">
  <div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
    <leaflet center="map.center"
             width="100%"
             height="100%"
             markers="markers"
             layers="map.layers">
    </leaflet>        
  </div>
</ion-content>

style of the div is to make map fullscreen.

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);*/

With these two things, Leaflet maps go well.

[aaronksaunders]

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.

[dangeross]

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.

[doronsever]

I had the exact same thing.
Thanks for this reply cuz it fixed my app(broke other stuff, but alot easier to fix )

[Robin]

Guys, use the power of Google: Angular Leaflet Directive

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.

[aaronksaunders]

the issue was related to using multiple leaflet directives…

[dezeloper]

@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.

[Calendee]

Congratulations! The app looks really neat.

Thanks for opening that issue.

BTW : The app showcase is being rewritten; so, it might be a week or more before your app is listed.

[ggalmazor]

Hi!

I have narrowed down the problem to the following scenario: app with tab navigation and the view that contains the map not in initial rendered view.

I’ve prepared a new codepen at http://codepen.io/ggalmazor/pen/HAtwF using the nightly build and latest leaflet & leaflet directive sources.

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.

[r0ma]

Hi. Try add data-tap-disabled=“true” option to your leaflet directive. Like this

<leaflet data-tap-disabled="true" style="height: 400px; width: 100%;"></leaflet>