Ion-content / modal and leaflet map

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

See this :

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.

Thanks for the reply,

I tried with the nightly bundle but nothing change,

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

Edit: sorry, please ignore this… and don’t forget to include leaflet css! :stuck_out_tongue:
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?

1 Like

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

invalidateSize() did the trick for me.