How to make MapLibre GL interactive in Full Screen mode?

Question

Hi) I want to create map with option interactive: false, but in full screen this param make true. Any ideas?

 const _map = new MapGL({
        container: elementName,
        style: this.maplibreGlDataFromJsonService.getMapStyleConstants(),
        // style: `${mapStyle}?apiKey=${myAPIKey}`,
        center: [_lon, _lat],
        zoom: 9,
        interactive: false,
        transformRequest: (url: string, resourceType: any) => {
          return {
            url: url,
            headers: {
              'Authorization': 'Bearer ' + this.authService.accessToken,
              'mode': 'no-cors'
            }
          }
        }

      });
      let marker = new Marker()
        .setLngLat([_lon, _lat])
        .addTo(_map);

      var navigationBtns = new NavigationControl({showCompass: false, showZoom: false, visualizePitch: true});
      _map.addControl(navigationBtns, 'top-left');

      _map.addControl(new FullscreenControl({container: document.querySelector('.' + elementName)}));

score 0 · Accepted Answer · answered Aug 17 '22 at 14:37

I haven't seen a way to change the interactive option after you create the map. You can enable and disable the user interaction handlers (https://maplibre.org/maplibre-gl-js-docs/api/handlers/).

You could toggle those using a listener on the fullscreenchange event (https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event).

For example:

const interactionHandlers = [
    'boxZoom', 'scrollZoom', 'dragPan', 'dragRotate', 'keyboard', 'doubleClickZoom', 'touchZoomRotate', 'touchPitch'
];

for (let handler of interactionHandlers) {
    map[handler].disable();
}

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    // entering fullscreen mode - enable interaction
    for (let handler of interactionHandlers) {
        map[handler].enable();
    }
  } else {
    // leaving fullscreen mode
    for (let handler of interactionHandlers) {
        map[handler].disable();
    }
  }
});

How to make MapLibre GL interactive in Full Screen mode?

1 Answers1