Programatically Changing a Mapbox Map’s Language

Mapbox allows customers to create highly customizable maps, with a plethora of features and API endpoints available. One example is the map layer’s language, which can be modified either in Mapbox Studio or programatically.

Using Mapbox Studio is a wise approach for many use cases, as a user can modify the map layer’s language once and be done with it. Once this change has been made, the map will always load with the new language.

There are other use cases that necessitate a dynamic approach, where the language can change depending on who is loading the map. This is the case in many real-world applications that leverage the Mapbox API, where customers are given the choice what language they want to see when interacting with the app (and the user’s chosen language would have to be reflected in the map as well).

Using the setLayoutProperty method, we can dynamically change the map layer’s language. In this example, I picked three labels to change — country, state, and marine (sea/oceans), though there are a few more that can be changed.

Using both the native Mapbox API and React-map-gl, changing the language for a specific label (country-label in this case) looks like this:

let mapboxSource = await mapRef.current.getMap();
mapboxSource.setLayoutProperty("country-label-lg", "text-field", [
   "get",
   "name_" + e.value,
    ]);

A demo of this can be found here — a short video is also shown below.

Github Repository with all the code: https://github.com/stefangouyet/changing-language-mapbox