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.

3 Answers 3


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
    Commented Apr 26, 2017 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 Commented Jan 8, 2018 at 0:39
  • The one from James Conkling didn't work on my map but this one from Max Kaplin did. Thanks Max. Commented Apr 3, 2020 at 17:34

For the most recent version correct answer is:

map.addControl(new mapboxgl.NavigationControl(), 'top-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
    Commented Apr 7, 2019 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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