CODEWITHSUNDEEP
mapbox-gl-js
cephirothdy2j
cephirothdy2j

Reputation: 13

Toggling Mapbox GL Control Visibility

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.

Upvotes: 0

Views: 2208

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126025

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

Upvotes: 0

Related Questions