How to display a Leaflet map in modal window?

Question

I produce geospatial data in a content type with addressfield and geofield. I can display this data in a Leaflet map as field without any problem. But I have to use here a modal, therefore I render the map programmatically:

<?php
$map = leaflet_map_get_info('google-high-res');
$map['settings']['zoom'] = 15;

$lon=$entity->field_terkep['und'][0]['lon'];
$lat=$entity->field_terkep['und'][0]['lat'];

$features = array(
   array(
        'type' => 'point',
        'lon' => $lon,
        'lat' => $lat
      )
    );
print leaflet_render_map($map, $features, $height);
?>

When I display this map as a field, everything is OK, visitors can see the map as intended (marker in the middle etc.) But if I place it in a modal, multiple issues appear (see in the attached screenshot): Only one map tile is generated and the marker is in the wrong place in the modal as well, it's in the top left corner. I have tried Bootstrap Modal and Colorbox, it doesn't make any difference.

Answer 1

I found similar issues either with Leaflet or Google maps, like this one here. So I have to reload or re-render the map after the modal window become visible. For this purpose I inserted this jQuery code which does the trick:

drupal_add_js('
jQuery(function($) {
$(document).ready(function(){
$(\'#myMap\').on(\'shown.bs.modal\', function(){
var map = Drupal.settings.leaflet[0].lMap;
map.invalidateSize();
});
});
});
', 'inline');