Ion-content / modal and leaflet map

[pierdav]

If I write

<ion-content>
<div id="map"></div>
</ion-content>

then clicks on map zoom and marker are broken

also when open and close modal (with or without ion-content) on leaflet map, clicks are broken and z-index are wrong

You can test the problem here http://jsfiddle.net/83uDj/18/

This happens since I use 0.9.27 version, it was OK with 0.9.26

[Calendee]

See this :

Using Popups in Modals

Hi there, Can someone point me in the right direction, I am trying to display a $ionicPopup over a $ionicModal. So the modal is open and the user needs to select an item from a list in a popup. But it looks like the modal still has focus even tho the popup is over it. I have I feeling it might be an issue with z-index’s and/or translate3d(0px, 0px, 0px) Codepen: http://codepen.io/dangeross/pen/wvAjJ/ Would very much appreciate some help, Thanks, Ross

It was essentially the same problem. However, the fix is only in the nightlies. You are free to use the nightlies, but it has some major breaking changes.

[pierdav]

Thanks for the reply,

I tried with the nightly bundle but nothing change,

Here the update : http://jsfiddle.net/83uDj/26/

[antoniogiungato]

Edit: sorry, please ignore this… and don’t forget to include leaflet css!
I’ll leave this here, maybe can help. If not, feel free to delete.

===========================================================
Did something changed about modals in 1.0.0beta since 0.9.27?
In 0.9.27 leaflet maps in modals somewhat worked with this in a controller:

// open modal and fix map
$scope.showModal = function(id) {
  $scope.modal.show();
  leafletData.getMap().then(function(map) {
    map.invalidateSize();
  });    
};

and this css:

.scroll {
   height: 100%;
}

.angular-leaflet-map {
   width: 100%;
   height: 100%;
}

In 1.0.0beta the map is all messed up.
Any idea?

[dangeross]

It looks like between the beta.1 release and the nightly build today there is an issue again with the controls on leaflet maps. Seems to work fine in Chrome, but on the emulator/device the controls no longer work. Dragging is fine, clicking is broken

[ahuck]

invalidateSize() did the trick for me.