0

I'm trying to load map in bootstrap modal but map appear partly, it's also freezing so I can't select any region. Despite of using map.invalidateSize() my problem is still resisting. Is there anybody to make it work in bootstrap modal or any other kind of modal?

leaflet-modal

here is my code:

<script type="text/javascript">
    var LbsConfig = {
        Url:'https://map.ghasedakbahar.ir:6443/arcgis/rest/services/iran/FeatureServer/0',
        View: [35.6970, 51.4079],
        MapID: 'map-id',
        Color: {
            Default: '#9ab9ff',
            Selected: '#ff0659'
        }
    };

    var map = LbsMap();
    LbsShowNew(map, function (regions) {
        var maxRegions = 5;
        var errRegions = 'The number of areas is more than 5 areas';
        if (regions.length > maxRegions) {
            alert(errRegions);
            return;
        }
        jQuery('#Regions').val(regions.join(','));
        jQuery('#count-selected').html(regions.length);
    });

    $('#myMap').on('show.bs.modal', function () {
        setTimeout(function () {
            map.invalidateSize();
        }, 10);
    });

</script>
#map-id {
        padding: 0;
        width: auto;
        height: 400px;
    }
<!-- Modal -->
<div class="modal fade" id="myMap" role="dialog" style="margin-top:70px">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content font-yekan">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">'SendSmsDetail'</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <div id="map-id"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
Bugs
  • 4,491
  • 9
  • 32
  • 41
Fatemeh Rostami
  • 1,047
  • 1
  • 15
  • 27
  • 1
    Please do not vandalize your posts. Once you've posted a question, you have licensed the content to the Stack Overflow community at large (under the CC-by-SA license). If you would like to disassociate this post from your account, see [What is the proper route for a disassociation request?](http://meta.stackoverflow.com/questions/323395/what-is-the-proper-route-for-a-dissociation-request). – Bugs Aug 22 '17 at 07:35

1 Answers1

0

I remember having the same problem before. There is a lot of similar problem on internet and maybe this one can help you :

Leaflet map not showing properly in bootstrap 3.0 modal

I think what is happening is that, when the map is created, the container width/height for your `map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be.

You can fix this by calling map.invalidateSize(). This will work to re-adjust the width/height bounds of the L.Map's container.

You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.

$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });

Insert this code into your JavaScript. When the modal is shown, the map will then invalidate its size. The timeout is because there may be some animation/transition time for the modal to display and be added to the DOM.

Baptiste
  • 1,688
  • 1
  • 15
  • 25