Toggling Mapbox GL Control Visibility

Question

I have a React app with an instance of a Mapbox GL map inside a container that I am allowing my users to adjust the width and height of. On that map I've called addControl() to add a NavigationControl.

Is there a way to toggle the visibility of the NavigationControl based on the width / height of my container (which are being passed down to the container as props), much in the same way I can change the visibility of a layer by calling [setLayoutProperty(https://www.mapbox.com/mapbox-gl-js/api#map#setlayoutproperty)]?

I thought about adding and removing the control but per the documentation, the returned value of addControl() is the map itself, and I don't see any place where I can access the current controls being displayed.

Steve Bennett Steve Bennett · Accepted Answer · 2018-01-10T11:31:33

The most straightforward option is just to manipulate the DOM.

$('#map .mapbox-ctrl-top-right button').hide()

If you want to make that happen automatically in response to the page being resized, use CSS:

@media only screen and (max-width: 600px)  {
    #map .mapbox-ctrl-top-right button {
       display: none;
    }
}

Toggling Mapbox GL Control Visibility

1 Answers