how to display only + and - in the mapbox navigation control

Question

I am using the following code line to show a navigation control on my map:

  map.addControl(new mapboxgl.NavigationControl());

It displays the Zoom in + and Zoom out - options which are great but it also shows the tilt map option underneath the zoom in and zoom out buttons. I want to remove this and only show Zoom in and Zoom out option. It seems like something simple to fix but I wasn't able to come up with an anser in my research.

Answer 1

They added the feature to disable the compass. https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol

EDIT: you can write it like this

var nav = new mapboxgl.NavigationControl({
        showCompass: false,
        showZoom: true
      });

map.addControl(nav, "top-left");

Answer 2

Looks like the Mapbox GL JS team is planning on adding the ability to the mapboxgl.Navigation() function to disable the compass, but for now, disabling it in the CSS is the preferred way to do it:

.mapboxgl-ctrl-compass {
    display: none !important;
}