I'm trying to make a longitude and latitude picker using mapbox.js and I need this map to be in a modal box which opens when I click on a "choose location" button. But when this modal opens the map is not rendered pletely.

this is my code:

<div class="modal fade" id="chooseLocation" tabindex="-1" role="dialog" aria-labelledby="chooseLocation" aria-hidden="true">
    <div class="Cadd-event-modal" style="width: 600px; margin: 0px auto; margin-top: 10%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title Cfont-1">Choose location</h4>
        </div>
        <div class="modal-body" style="width: 500px; margin: 0px auto;">

            <div id='map'></div>
            <div class='map-overlay'>
                <label for='latitude'>latitude</label><br />
                <input type='text' size='5' id='latitude' /><br />
                <label for='longitude'>longitude</label><br />
                <input type='text' size='5' id='longitude' />
            </div>


        </div>
        <div class="model-footer"></div>
    </div>
</div>

Script

    var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
           .setView([0, 0], 2);

    // get the form inputs we want to update
    var latitude = document.getElementById('latitude');
    var longitude = document.getElementById('longitude');

    var marker = L.marker([0, 0], {
        draggable: true
    }).addTo(map);

    // every time the marker is dragged, update the form
    marker.on('dragend', ondragend);

    // set the initial values in the form
    ondragend();

    function ondragend() {
        var ll = marker.getLatLng();
        latitude.value = ll.lat;
        longitude.value = ll.lng;
    }

and the button action

$('#chooseLocation-btn').click(function(){
   $('#chooseLocation').modal('show');
});  

I'm trying to make a longitude and latitude picker using mapbox.js and I need this map to be in a modal box which opens when I click on a "choose location" button. But when this modal opens the map is not rendered pletely.

this is my code:

<div class="modal fade" id="chooseLocation" tabindex="-1" role="dialog" aria-labelledby="chooseLocation" aria-hidden="true">
    <div class="Cadd-event-modal" style="width: 600px; margin: 0px auto; margin-top: 10%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title Cfont-1">Choose location</h4>
        </div>
        <div class="modal-body" style="width: 500px; margin: 0px auto;">

            <div id='map'></div>
            <div class='map-overlay'>
                <label for='latitude'>latitude</label><br />
                <input type='text' size='5' id='latitude' /><br />
                <label for='longitude'>longitude</label><br />
                <input type='text' size='5' id='longitude' />
            </div>


        </div>
        <div class="model-footer"></div>
    </div>
</div>

Script

    var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
           .setView([0, 0], 2);

    // get the form inputs we want to update
    var latitude = document.getElementById('latitude');
    var longitude = document.getElementById('longitude');

    var marker = L.marker([0, 0], {
        draggable: true
    }).addTo(map);

    // every time the marker is dragged, update the form
    marker.on('dragend', ondragend);

    // set the initial values in the form
    ondragend();

    function ondragend() {
        var ll = marker.getLatLng();
        latitude.value = ll.lat;
        longitude.value = ll.lng;
    }

and the button action

$('#chooseLocation-btn').click(function(){
   $('#chooseLocation').modal('show');
});  

• javascript
• twitter-bootstrap-3
• mapbox

3 Answers 3

I'm not sure whether your issue already fixed or not. However, I also faced the same problem, and I fixed it by using the following code. Posting answer as it may help someone else.

$('#chooseLocation').on('shown.bs.modal', function () { // chooseLocation is the id of the modal.
    map.invalidateSize();
 });

here is a good example for a tab using mapbox gl js and map.resize()

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
  map.resize();
});

Note for posterity: if your map is loading in a hidden div and neither resize() nor invalidateSize() is working, try setting overflow: visible inline on your map element.

I was loading the map in a bootstrap modal which means it is hidden on load. When the map is hidden on load it can't find its width or height to define the boundaries of the map element. Setting overflow: visible seemed to allow the resize() function to go through. This can cause issues in layout though, as the map will extend past the borders of the map element. You can try wrapping the map in another div with overflow: hidden instead.