Change language labels

Learn how to change language labels in a map.

The ArcGIS Static Basemap Tiles service provides a number of different styles that you can use in your Esri Leaflet applications. Each style accepts a language parameter, which allows you to localize place labels. There are currently more than 5 different languages available.

In this tutorial, you use a <select> dropdown menu to toggle between a number of different language labels for the static basemap tiles.

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 credentials so your application can access ArcGIS services.

Update the map's viewpoint

1. Change the map's center to [47.14, 8.90] and zoom level to 7. This will focus the map on Switzerland.

   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
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
       const map = L.map("map", {
         minZoom: 2
       });
   
       map.setView([47.14, 8.90], 7);
   
   

   Expand

Add the language labels

You will get all the available languages for your selected basemap style and create a menu that allows users to change the display language of your map.

1. Remove the code that adds a basemap layer because you will load it dynamically from a menu instead.

   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
         const basemapEnum = "arcgis/navigation";
   
         L.esri.Static.staticBasemapTileLayer(basemapEnum, {
           token: accessToken
         }).addTo(map);
   

2. Use the getSelf method from L.esri.Static.Util to make a request to the Static Basemap Tiles service that returns all available basemap styles and their metadata.

   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
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
       const map = L.map("map", {
         minZoom: 2
       });
   
       map.setView([47.14, 8.90], 7);
   
       const basemapStyle = "arcgis/navigation";
   
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
       });
   

   Expand

3. Create a languages object to store all the returned languages available for arcgis/navigation.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const languages = {};
   
       });
   

   Expand

4. Iterate through each language and create an L.esri.Static.staticBasemapTileLayer, passing the language code to the language property. Store it inside the languages object.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const languages = {};
   
         data.languages.forEach((language) => {
           languages[language.name] = L.esri.Static.staticBasemapTileLayer(basemapStyle, {
             token: accessToken,
             language: language.code
           });
         });
   
       });
   

   Expand

5. Create a Layers control that references languages and add it to your map.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const languages = {};
   
         data.languages.forEach((language) => {
           languages[language.name] = L.esri.Static.staticBasemapTileLayer(basemapStyle, {
             token: accessToken,
             language: language.code
           });
         });
   
         L.control.layers(languages, null, { collapsed: false }).addTo(map);
   
       });
   

   Expand

6. Append addTo to the French entry so that it is the default language when the application loads.

   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
       L.esri.Static.Util.getSelf(accessToken).then((data) => {
   
         const languages = {};
   
         data.languages.forEach((language) => {
           languages[language.name] = L.esri.Static.staticBasemapTileLayer(basemapStyle, {
             token: accessToken,
             language: language.code
           });
         });
   
         L.control.layers(languages, null, { collapsed: false }).addTo(map);
   
         languages["French"].addTo(map);
   
       });
   

   Expand

Run the app

Run the app.

The map should be displayed in French and you should be able to use the controls to switch between language labels.

What's next?

Learn how to use additional location services in these tutorials: