You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have an map projected with OpenLayer 6. I added a button to change to 3d view with ol-cesium.
When the map is in Cesium the fullscreen button of Openlayer is no more visible (which by the way works perfectly in all browsers when I am in standard OL 2d), as it happens with ol-controls. So I added a fullscreen button that appears only when in ol3d. However, when I have ol3d activated, toggling between fullscreen and normal screen works fine only in Firefox and Chrome. In Safari I can access the fullscreen, but I cannot exit (I have to use the keyboard esc). I don't understand where's the problem.
const ol3d = new olcs.OLCesium({
map: map,
});
//set ol3d to false as normally I want the 2d map view
ol3d.setEnabled(false);
//when clicking on 3D I enable the Cesium view
document.getElementById('enable').onclick = function() {
//get the elements controlling Fullscreen mode
let cesiumFsTrigger = document.getElementById('cesiumFs');
let cesiumFsButton = document.getElementById('cesiumFsButton');
//if ol3d is true
if(!ol3d.getEnabled()){
//when opening up Cesium I change zoom and center
const NewView = new ol.View({
projection: mercatorProjection,
center: ol.proj.transform([-80, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3,
maxZoom: 15,
minZoom: 0,
});
map.setView(NewView);
//set ol3d to true
ol3d.setEnabled(true);
//When in 3d add a "Fullscreen" icon in substitution to the OpenLayer interaction (otherwise not working with Cesium)
//shows the new fullscreen button (set as active)
cesiumFsTrigger.classList.add('FsActive');
//add a fontawesome icon
cesiumFsButton.innerHTML = '<i id="toggleFs" class="fa fa-expand-arrows-alt" aria-hidden="true"></i>';
let iconFs = document.getElementById('toggleFs');
let cesiumFsElement = document.getElementById('map');
//set fullscreen mode to the map
cesiumFsTrigger.addEventListener("click", () => {
if (!document.fullscreenElement) {
Cesium.Fullscreen.requestFullscreen(cesiumFsElement);
iconFs.classList.remove('fa-expand-arrows-alt');
iconFs.classList.add('fa-compress-arrows-alt');
} else {
if (Cesium.Fullscreen.exitFullscreen) {
Cesium.Fullscreen.exitFullscreen();
iconFs.classList.remove('fa-compress-arrows-alt');
iconFs.classList.add('fa-expand-arrows-alt');
}
else if (Cesium.Fullscreen.webkitExitFullscreen) {
Cesium.Fullscreen.webkitExitFullscreen();
iconFs.classList.remove('fa-compress-arrows-alt');
iconFs.classList.add('fa-expand-arrows-alt');
}
}
});//close fullscreen conditions for icons
}
else {
//if ol3d is false
ol3d.setEnabled(false)
map.setView(view);
cesiumFsTrigger.classList.remove('FsActive');
}
};
The text was updated successfully, but these errors were encountered:
I have an map projected with OpenLayer 6. I added a button to change to 3d view with ol-cesium.
When the map is in Cesium the fullscreen button of Openlayer is no more visible (which by the way works perfectly in all browsers when I am in standard OL 2d), as it happens with ol-controls. So I added a fullscreen button that appears only when in ol3d. However, when I have ol3d activated, toggling between fullscreen and normal screen works fine only in Firefox and Chrome. In Safari I can access the fullscreen, but I cannot exit (I have to use the keyboard esc). I don't understand where's the problem.
Here's my code
HTML
JS
The text was updated successfully, but these errors were encountered: