CODEWITHSUNDEEP
javascriptjquerymapboxmapbox-gl-js
Henry Zhu
Henry Zhu

Reputation: 2628

MapBox GL JS: Make a non-interactive map interactive

In my web application, initially the map is set to be non-interactive (the user can't move around the map):

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    zoom: 11,
    interactive: false
});

However, when the user clicks a button, I want the map to become interactive (the user can move around the map). I've tried setting the interactive property to true, but it doesn't work:

map.interactive = true;

Any suggestions?

Upvotes: 2

Views: 993

Answers (1)

Danny Delott
Danny Delott

Reputation: 7008

You're correct in that you cannot change the interactive option after you've instantiated your map instance. So it seems you have a couple of options:

1) Instantiate a new, non interactive map and replace the interactive one.

2) Disable pointer-events css rule on your map container element as mentioned in the issue tracker: https://github.com/mapbox/mapbox-gl-js/issues/7992

Good luck!

Upvotes: 3

Related Questions