How to add custom full screen control behavior with HERE Maps API Javascript

Question

Is there any way to intercept the default behavior of the full screen control using the Here Maps API Javascript?

I want to prevent the custom full screen behavior when you press the control without eliminating the UI. If the user clicks on the control the map will increase in size inside a container instead as shown in below image.

Thanks in advance for your valuable advice.

Answer 1

I think this question is not related to HERE APIs but to Javascript itself.

I found the solution on https://www.w3schools.com/howto/howto_js_fullscreen.asp & Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture

Simple code for test:

function openFullscreen(elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) { /* Safari */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE11 */
      elem.msRequestFullscreen();
    }
  }

 //when you tap on screen then is opened in fullscreen mode
 map.addEventListener('tap', () => {
      openFullscreen(document.documentElement); //open in fullscreen mode whole HTML document
      //or
      //openFullscreen(document.getElementById('mapContainer')); //open in fullscreen mode only map
      
    });

The above example was implemented here: https://jsfiddle.net/ybj57ovc/1/