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