Change language labels

Learn how to localize place labels in the basemap.

The ArcGIS Basemap Styles serviceThe ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service.Learn more provides a number of different styles you can use in Esri Leaflet applications. Each style accepts a language parameter, which allows you to localize place labels. There are currently over 30 different languages available.

In this tutorial, you use Esri Leaflet Vector to create a language selector and switch between different languages.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

Create a basemap language function

Create a function that accepts a language code and returns a basemap style formatted with that language.

1. Define a new getLanguage function that accepts a language code and returns a VectorBasemapLayer.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   
       function getLanguage(languageCode) {
         return L.esri.Vector.vectorBasemapLayer(basemapStyle,
   
         );
       }
   

2. In the basemap layer properties, set the language option to your languageCode. Set version:2 to access the styles service, and pass your access token.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   
       function getLanguage(languageCode) {
         return L.esri.Vector.vectorBasemapLayer(basemapStyle,
   
           {
             language: languageCode,
             token: accessToken
           }
   
         );
       }
   

Add a language selector

Add a menu that allows users to change the display language of your map.

1. Use L.esri.get to make a request to the Basemap Styles service. This dynamically fetches the available basemap languages. For each enumerated language, call the getLanguage function to populate the languages list.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
       function getLanguage(languageCode) {
         return L.esri.Vector.vectorBasemapLayer(basemapStyle,
   
           {
             language: languageCode,
             token: accessToken
           }
   
         );
       }
   
       L.esri.get(
         "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self",
         { token: accessToken },
         (error, response) => {
           if (error) {
             console.error("Error fetching languages:", error);
             return;
           }
   
           const languages = {};
           let firstLanguage;
   
           response.languages.forEach((language, index) => {
             const layer = getLanguage(language.code);
             languages[language.name] = layer;
   
             if (index === 0) {
               firstLanguage = layer;
               firstLanguage.addTo(map);
             }
           });
   

   Expand

2. Create a Leaflet Control and add it to your map. Pass the languages object to display all of the supported languages.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
       L.esri.get(
         "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self",
         { token: accessToken },
         (error, response) => {
           if (error) {
             console.error("Error fetching languages:", error);
             return;
           }
   
           const languages = {};
           let firstLanguage;
   
           response.languages.forEach((language, index) => {
             const layer = getLanguage(language.code);
             languages[language.name] = layer;
   
             if (index === 0) {
               firstLanguage = layer;
               firstLanguage.addTo(map);
             }
           });
   
           L.control.layers(languages, null, { collapsed: false }).addTo(map);
   

   Expand

Add RTL language support

Esri Leaflet Vector does not automatically display right-to-left languages, such as Arabic and Hebrew, correctly. Use the Mapbox GL RTL Text plugin to configure settings for RTL languages.

1. Call the L.Esri.Vector.setRTLTextPlugin with the URL of the Mapbox GL RTL Text plugin to configure support for RTL languages.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
           L.control.layers(languages, null, { collapsed: false }).addTo(map);
   
         }
       );
   
       L.esri.Vector.setRTLTextPlugin("https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js");
   

   Expand

Run the app

Run the app.

You should be able to use the Leaflet control to switch between basemap languages.

What's next?

Learn how to use additional location services in these tutorials: