Would anyone know if it is possible to move the navigation controls from top-right to top-left? By default, it is top-right, but I would like to add a company's logo at that position and I've seen other Mapbox maps with controls on the left.


Should be possible w/o hacking the DOM:

map.addControl(new mapboxgl.Navigation({position: 'top-left'}));

See the docs.

Note: haven't tried this; as w/ attribution, might be necessary to set the default navigation control to false when initializing the map.

  • This won't work - position is not a parameter for Navigation. Instead the answer by @max-kaplan is correct. – fooquency Apr 7 '19 at 18:47

I could not get it to work with @james-conkling 's example above. I did this instead:

var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
  • This worked for me with the newest versions of mapbox gl – stuyam Apr 26 '17 at 17:54
  • 1
    Is there any way to center the control? I've tried .mapboxgl-ctrl-top-right{ top: 0; right: 50%; } but it places the right end of the control on the middle of the screen, but I wnat the middle of the control to be in the middle of the screen – Alejandro Lozdziejski Jan 8 '18 at 0:39
  • The one from James Conkling didn't work on my map but this one from Max Kaplin did. Thanks Max. – Aubrey Love Apr 3 '20 at 17:34

For the most recent version correct answer is:

map.addControl(new mapboxgl.NavigationControl(), 'top-left');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.