How to extend a class with mapbox-gl FullscreenButton

Question

I want to wrap the standard mapbox-gl FullscreenButton, see here , to add following features:

1. needsclick should be add to the button class to avoid Fastclick errors.
2. Instead of just making the mapcontainer fullscreen, the button should make the entire document page fullscreen (so also other divs etc.).

I tried the following: fiddle . Somehow you first have to hit return in the ES6/Babel window before the code will run and the map shows...

Problems I ran into:

1. The ' onAdd ' method somehow triggers this error:

"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at e.addControl ( https://api.tiles.mapbox.com/mapbox-gl-js/v0.36.0/mapbox-gl.js:390:3490 ) at jekuwak.js:69:5"

2. When 1 is solved (I workaround by adding needsclick via Chrome Devtools), the this._mapContainer.webkitRequestFullscreen() is triggered.

What do I change to get the full page fullscreen instead of just the mapcontainer?

Answer 1

For #1:

const fs = new mapboxgl.FullscreenControl();
map.addControl(fs)
fs._fullscreenButton.classList.add('needsclick');

For #2:

The FullscreenControl is not extensible in this way – it has been designed to operate on the map canvas and changing that would probably be more trouble than just writing the functionality you want from scratch. If you want to make your whole window fullscreen, I suggest you implement the full-screen functionality independently of mapboxgl. If you want to be able to use the icons provided with mapboxgl you can add the appropriate CSS classes to the element you create.