0

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.

Leaflet map in modal

0

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.