It looks like there is a weird bug when trying to display an ol3 map within a modal. The map is in the modal but it doesn't display. Resizing the window manually forces it display however. Here's a link to try and see what I mean. Click on the settings pulldown within each map. Click on 'Get Feature Info'. This will toggle the modal with a map in it (but not displaying). Resize your window. Voila!

I tried many ways to use javascript and jQuery to trigger a resize event along the lines of:

$('#featinfo').on('shown.bs.modal', function () {
ol.Map.event.trigger(map5, "resize"); //borrowed from google.maps.event. How to do this in ol3?
});

Help?

It looks like there is a weird bug when trying to display an ol3 map within a modal. The map is in the modal but it doesn't display. Resizing the window manually forces it display however. Here's a link to try and see what I mean. Click on the settings pulldown within each map. Click on 'Get Feature Info'. This will toggle the modal with a map in it (but not displaying). Resize your window. Voila!

I tried many ways to use javascript and jQuery to trigger a resize event along the lines of:

$('#featinfo').on('shown.bs.modal', function () {
ol.Map.event.trigger(map5, "resize"); //borrowed from google.maps.event. How to do this in ol3?
});

Help?

• javascript
• jquery
• twitter-bootstrap-3
• openlayers-3

• were you able to solve this? – darkphantum Commented Jun 18, 2014 at 6:54
• no. not yet. any ideas? – Alfonse Commented Jun 19, 2014 at 14:20
• Check this jsbin.com/hunexepeti/2/edit?html,js,output and stackoverflow.com/questions/29904425/… – Daviddd Commented Jun 18, 2015 at 8:47

6 Answers 6

I had the same problem. You need to force the map to load after the modal has been open. Try having a function that inits the map:

function loadMap () {
    var map = new ol.Map({
        controls: ol.control.defaults({
            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
            })
        }).extend([mousePositionControl]),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
}

And shown.bs.modal is the event trigered once the modal is opened

<script>
    $('#GazModal').on('shown.bs.modal', function () {
        loadMap();
     })
</script>

Have you tried:

map.updateSize();

Make sure you set a height and width for the Open Layers map container..

#map {
    width:100%;
    height:500px;
}

Demo: http://www.bootply.com/68637

In the controller of my modal I create the map when the rendered promise from $modalInstance is resolved

$modalInstance.rendered.then(function () {
            createMap();
        });

It seems that the creation of the modal and the map is happening almost simultaneously so when you create the map it can't find the div element to create it. I put a small timeout after the creation of the modal to solve it

  setTimeout(() => {
  const map2 = new Map({
    target: 'scanmap',
    layers: [
      new TileLayer({ source: new OSM() })
    ],
    view: new View({
      center: [0, 0],
      zoom: 6
    })
  });
}, 100);

In an AngularJS application i had the same problem.

I resolved it by adding a little timout on $onInit()

constructor(private $log: ILogService, private $window: any, private $timeout: ITimeoutService) {
}

$onInit() {

    // we need a timout here to load map after the modal!
    this.$timeout(() => {
        this.initMyMap();
    });

}