On my Mapbox map, I added the navigation control elements proposed by the Mapbox API (zoom and rotation).

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

When hovering over these buttons, a content appears as "Zoom in".


This content is declared in the html code of Mapbox, it corresponds to the "title" value.


In the context of a French web application, I'm trying to translate this content. So, I modify the css code in the following way but nothing happens:

.mapboxgl-ctrl-zoom-in:hover {
  content: "test";

I don't know if it's possible to change the content directly. I think that an alternative solution would be not to add these navigation elements in the javascript code but directly by declaring them in the html code in order to be able to modify this value.

You can try by clicking on the following link : JSFiddle Demo

1 Answer 1


You can pass a locale object when creating your map to change the default UI strings. eg.

    const map = new mapboxgl.Map({
      locale: {
        'NavigationControl.ZoomIn': 'Zoom avant',
        'NavigationControl.ZoomOut': 'Dézoomer',

The full list of supported values is at https://github.com/mapbox/mapbox-gl-js/blob/master/src/ui/default_locale.js.

This was introduced in Mapbox GL JS 1.6.0 via https://github.com/mapbox/mapbox-gl-js/pull/8095 and the locale option is documented at https://docs.mapbox.com/mapbox-gl-js/api/

  • Excellent solution, thank you very much, very practical! To get around my problem, I had downloaded the js script from the api I was calling and changed the values, it wasn't very elegant. Apr 1, 2020 at 7:45

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.