Fullscreen for iOS

Introduction

As it's not possible to switch the map to full screen natively with iOS. In this page we will see how to bypass the fullscreen in iOS and make the map full size in your page.

First, you will have to instanciate a livemap in your page in order to access the livemap object. You can find this example here.

Listen to fullscreen event

The livemap exposes 2 events that we will need:

• fullscreenEnter
• fullscreenExit

The idea is to expand the container of the livemap on the fullscreenEnter event and come back to initial size on fullscreenExit event.

On fullscreen enter

We need to expand the size of the map

const container = document.getElementById('map_container');

// Create livemap here

livemap.addEventListener('fullscreenEnter', function() {
    container.style.position = 'fixed';
    container.style.width = '100vw';
    container.style.height = '100vh';
});

We need also need to keep the initial size and position of map.

In your case maybe you don't need to keep it in a variable since you may already know what size and the position of the container.

const container = document.getElementById('map_container');

// Create livemap here

let initialValues = {};
livemap.addEventListener('fullscreenEnter', function() {
    initialValues.position = container.style.position;
    initialValues.width = container.style.width;
    initialValues.height = container.style.height;

    container.style.position = 'fixed';
    container.style.width = '100vw';
    container.style.height = '100vh';
});

On fullscreen exit

On fullscreen exit, we only need to put back the initial value to the container

const container = document.getElementById('map_container');

// Create livemap here

livemap.addEventListener('fullscreenExit', function() {
    container.style.position = initialValues.position;
    container.style.width = initialValues.width;
    container.style.height = initialValues.height;
});

Live results

info

As the example is embedded in an iframe, the live result will not work, but you can see below the result in video.

Code playground

<p>
    Here is some content before the map
</p>
<div id="map_container"></div>
<p>
    Here is some content after the map
</p>

Results

Video example