Toggle Mapbox GL JS map interactiveness after map load

Question

It is possible to change if a map is interactive or not after creating a map?

In the mapbox-gl-js documentation it is only possible to flag the map as interactive or non interactive when creating the map (option.interactive). But for some reasons I need to change it on the fly and toggle map interactiveness. Something like:

map.setInteractive(true);

or:

map.setInteractive(false);

Thanks for your support.

Arrhythmia

There's an example demonstrating how to enable or disable map interactions here: mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers – Archlute

Answer 1

This is how I do it, by disabling each of the map handlers:

(currently working on mapbox-gl-js/v0.45.0)

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

// disable map interaction so users can't pan, zoom, etc
map.boxZoom.disable();
map.scrollZoom.disable();
map.dragPan.disable();
map.dragRotate.disable();
map.keyboard.disable();
map.doubleClickZoom.disable();
map.touchZoomRotate.disable();

Handlers are documented here: https://www.mapbox.com/mapbox-gl-js/api/#Handlers

Roulade

Answer 2

Mapbox GL JS does not currently have a dynamic setter for changing the interactivity of the map. This would be relatively simple to implement, so if you'd like to cut a ticket, or preferably submit a PR, on the github repository we would definitely consider adding this feature.

In the meantime, you can enable / disable all the interaction handlers individually to achieve the same effect dynamically after the map has been created.

Snubnosed