Change the hover contents of the control navigation buttons in Mapbox GL

Question

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

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/