Leaflet freezes in Bootstrap 3 modal after zooming, closing and reopening the map

Hi,

I use Leaflet (master) to show the geolocation of different photos on a map in a modal dialog. When opening the modal with the map, everything works. But when I zoom in, close the modal dialog and click on another photo (with same or different lat and lng) the modal opens but the map does not respond to the mouse anymore. Everything except for the keyboard is frozen. If I move the view with the keyboard, it unfreezes. But I can’t change the zoom level with the mouse or move around, it does not respond to that…

Neither map.setView / map.setZoom nor map.invalidateSize() unfreeze the map. However, I found out that calling map.flyTo(map.getCenter()) and for example map.fire('moveend') unfreeze the map controls. But I’d rather not use those without understanding what the problem is. Do you have an idea, what the underlying problem could be?

Here my CoffeeScript code:

I call the following once with every page:load and page ready handler:

exports = this

# Create a global variable with the map object
exports.map = L.map('map-canvas')

# Add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(exports.map)

# Create a global variable with the marker object
exports.marker = L.marker([0, 0]).addTo(exports.map)

# Workaround for Bootstrap 3 modal dialog, resizes the map after the dialog is visible
$("#geoModal").on "shown.bs.modal", (e) ->
    exports.map.invalidateSize()

My click handler, which opens the modal dialog containing the map, looks like this:

exports = this

mapClickHandler = ->
    # Show on the map, where the photo was taken
    coords = L.latLng($("a#photo-maplink").data('latitude'), $("a#photo-maplink").data('longitude'))
    zoomlevel = $("a#photo-maplink").data('zoom-level') || 14
    # Change the position of our cached map object
    exports.map.setView(coords, zoomlevel)
    # Change the position of our cached marker object
    exports.marker.setLatLng(coords).update()
    # Open the modal dialog
    $('#geoModal').modal()

Is this a bug in Leaflet or did I get something wrong in my setup code / click handler?

[clemensg]

It looks like the shown.bs.modal event is not always fired and therefore invalidateSize does not get called every time the map container is shown. Calling invalidateSize both before I open the modal and after the shown.bs.modal event fired, does seem to fix the issue.

At the beginning of the click handler I call map.invalidateSize(), then I set the LatLng and the marker, then I open the modal and after shown.bs.modal fires, I call map.invalidateSize() again.

If I skip the first map.invalidateSize(), the bug reported in this issue happens: It works until I zoom, close and reopen the modal. On the other hand, if I skip the second map.invalidateSize() the map does not even get displayed correctly in the first place.

[anthonykeller79]

I’m not using bootstrap so when I get a test case setup I’ll raise a new issue.