What is the best way to create an interactive experience with MapLibre GL in Full Screen mode?

Question

What is the best way to create an interactive experience with MapLibre GL in Full Screen mode?

Hello, I am seeking a solution to create a map with the interactive option set to false, but once in full screen mode, I need this parameter to be true. Do you have any suggestions or ideas on how to achieve this?

 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)}));

angular typescript dictionary maplibre-gl

Answer 1

Answer №1

Once a map is created, there doesn't appear to be a straightforward method to modify the interactive settings. However, you do have the option to activate or deactivate the user interaction handlers. More information on this can be found at .

One approach is to toggle these handlers using an event listener for the fullscreenchange event. Details about this event can be found at https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event.

Here is an example code snippet to achieve this:

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) {
    // Enable interaction when entering fullscreen mode
    for (let handler of interactionHandlers) {
        map[handler].enable();
    }
  } else {
    // Disable interaction when leaving fullscreen mode
    for (let handler of interactionHandlers) {
        map[handler].disable();
    }
});

Answer 2

Once a map is created, there doesn't appear to be a straightforward method to modify the interactive settings. However, you do have the option to activate or deactivate the user interaction handlers. More information on this can be found at .

One approach is to toggle these handlers using an event listener for the fullscreenchange event. Details about this event can be found at https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event.

Here is an example code snippet to achieve this:

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) {
    // Enable interaction when entering fullscreen mode
    for (let handler of interactionHandlers) {
        map[handler].enable();
    }
  } else {
    // Disable interaction when leaving fullscreen mode
    for (let handler of interactionHandlers) {
        map[handler].disable();
    }
});

What is the best way to create an interactive experience with MapLibre GL in Full Screen mode?

Answer №1

Similar questions

The email input should be the same red color as the other inputs, but unfortunately it is

Exploring routing within a Higher Order Component in React Native

struggling with configuring dependency injection in NestJS and TypeORM

Generating dictionaries by utilizing data frames saved within a dictionary in Python

Switching the focus of detection from a child to a parent

When using Vue with Vuetify, be aware that object literals can only specify known properties. In this case, the type 'vuetify' does not exist in the ComponentOptions of Vue with DefaultData

Flexbox is not properly repeating elements horizontally

Enable the use of empty spaces in ag-grid filter bars

React's setState function failed to update the specified value within the set

Launching the Skeleton feature in NextJS with React integration

Leverage the keyof operator for automatic determination of return type

The new mui v5 Dialog is having trouble accepting custom styled widths

Issue with the Angular source maps are causing the sourceMappingUrl to break

Global Sass variables for responsive styling in Angular

What is the best way to target all select2 elements with a single button click?

Ways to deactivate a text area or mat-form-field

I'm having trouble understanding why I keep encountering this error message: "SyntaxError: Unexpected token T in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…"

Utilize the grid system from Bootstrap to style HTML div elements

Does @angular/router have a similar function to ui-router's transition.from()?

What does the reportProgress function do in HTTP services with JavaScript?