0

I included in an existing huge Angular 5/Ionic 3.9 app a map. Using Openlayers Version 5.0.2

I need to include fullscreen view as well.

In Firefox the fullscreen view works. In Chrome the switch to fullscreen works, but no map is loaded, as well the div for the map is not there.

I tried to set the source of FullScreen to a div with id/class fullscreen

<div id="fullscreen" class="fullscreen">
    <div id="map" class="db-map"></div>
</div>

let fullscreenTarget = document.getElementById('fullscreen').parentElement;

  controls: DefaultControls({
      attribution: false
    }).extend([new FullScreen({
      source: fullscreenTarget
    })]),

As well I tried several css modifications like this 

.db-map{ 
  #map {
      margin: 5;
      font-family: sans-serif;
      height: 100%;
      width: 100%;
      -webkit-full-screen: 100%;
      -moz-full-screen: 100%;
      -ms-fullscreen: 100%;
    }
}
.fullscreen {
  height: 100%;
  width: 100%;
}
.db-map.fullscreen {
  height: 100%;
  width: 100%;
}

While inspect the html page chrome shows that: Chrome fullscreen elements

Firefox shows that: Firefox fullscreen elements

But nothing works and I have no further idea what I could try.

Just a follow up for the problem above, that fullscreen was working in Firefox but not in Chrome. With a new version of Chrome the defect was fixed and now it is working.

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
Oliver Karst
  • 39
  • 1
  • 6
  • Just use the `#map` id selector, the .db-map and .fullscreen class(s) are redundant in your example. Also the `*-full-screen:` stuff are pseudo classes, not properties so they're not doing anything for you the way they're used there. Same with `margin: 5;` isn't valid. Is this map div in an `ion-content` pane? – Chris W. Aug 28 '18 at 14:06
  • Also can you please add a screenshot or example with url.. Are you running it locally, because Firefox has built in web server and Chrome doesn’t.. Could it be timing issue with you JavaScript? Trying it inside document.ready or with setTimeout call may help.. – boateng Aug 28 '18 at 14:24
  • You’ll notice in FF it’s sets height to 1080 for canvas.. I think may be because setting height:100% has no effect.. – boateng Aug 28 '18 at 15:30

0 Answers0