Change the place label language

Learn how to localize place labels using the basemap styles service.

The basemap styles service 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

You need an ArcGIS Location Platform or ArcGIS Online account.

Steps

Create a new pen

  1. Go to CodePen to create a new pen for your application.

Get an access token

You need an access token with the correct privileges to access the resources used in this tutorial.

  1. Go to the Create an API key tutorial and create an API key with the following privilege(s):

    • Privileges
      • Location services > Basemaps
  2. Copy the API key access token to your clipboard when prompted.

  3. In CodePen, update the accessToken variable to use 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
          const map = L.map("map", {
            minZoom: 2
          })
    
          map.setView([34.02, -118.805], 13);
    
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapEnum = "arcgis/streets";
    
          L.esri.Vector.vectorBasemapLayer(basemapEnum, {
            token: accessToken
          }).addTo(map);
    

To learn about the other types of authentication available, go to Types of authentication.

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
    107
    108
    109
    110
    111
    112
          const accessToken = "YOUR_ACCESS_TOKEN";
    
          const basemapStyle = 'arcgis/outdoor';
    
          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
    107
    108
    109
    110
    111
    112
          const basemapStyle = 'arcgis/outdoor';
    
          function getLanguage(languageCode) {
            return L.esri.Vector.vectorBasemapLayer(basemapStyle,
    
            {
              language: languageCode,
              version: 2,
              token: accessToken
            }
    
            )
          }
    

Add a language selector

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

  1. Create a new languages object. For each supported language, call the getLanguage function with its language code.

    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
    107
    108
    109
    110
    111
    112
          function getLanguage(languageCode) {
            return L.esri.Vector.vectorBasemapLayer(basemapStyle,
    
            {
              language: languageCode,
              version: 2,
              token: accessToken
            }
    
            )
          }
    
          const languages = {
            "Global": getLanguage("global"),
            "Arabic": getLanguage("ar"),
            "Bosnian": getLanguage("bs"),
            "Bulgarian": getLanguage("bg"),
            "Catalan": getLanguage("ca"),
            "Chinese (Simplified)": getLanguage("zh-CN"),
            "Chinese (Hong Kong)": getLanguage("zh-HK"),
            "Chinese (Taiwan)": getLanguage("zh-TW"),
            "Croatian": getLanguage("hr"),
            "Czech": getLanguage("cs"),
            "Danish": getLanguage("da"),
            "Dutch": getLanguage("nl"),
            "Estonian": getLanguage("et"),
            "English": getLanguage("en"),
            "Finnish": getLanguage("fi"),
            "French": getLanguage("fr"),
            "German": getLanguage("de"),
            "Greek": getLanguage("el"),
            "Hebrew": getLanguage("he"),
            "Hungarian": getLanguage("hu"),
            "Indonesian": getLanguage("id"),
            "Italian": getLanguage("it"),
            "Japanese": getLanguage("ja"),
            "Korean": getLanguage("ko"),
            "Latvian": getLanguage("lv"),
            "Lithuanian": getLanguage("lt"),
            "Norwegian": getLanguage("nb"),
            "Polish": getLanguage("pl"),
            "Portuguese (Brazil)": getLanguage("pt-BR"),
            "Portuguese (Portugal)": getLanguage("pt-PT"),
            "Romanian": getLanguage("ro"),
            "Russian": getLanguage("ru"),
            "Serbian": getLanguage("sr"),
            "Slovak": getLanguage("sk"),
            "Slovenian": getLanguage("sl"),
            "Spanish": getLanguage("es"),
            "Swedish": getLanguage("sv"),
            "Thai": getLanguage("th"),
            "Turkish": getLanguage("tr"),
            "Ukrainian": getLanguage("uk").addTo(map),
            "Vietnamese": getLanguage("vi")
          };
    
    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
    107
    108
    109
    110
    111
    112
          const languages = {
            "Global": getLanguage("global"),
            "Arabic": getLanguage("ar"),
            "Bosnian": getLanguage("bs"),
            "Bulgarian": getLanguage("bg"),
            "Catalan": getLanguage("ca"),
            "Chinese (Simplified)": getLanguage("zh-CN"),
            "Chinese (Hong Kong)": getLanguage("zh-HK"),
            "Chinese (Taiwan)": getLanguage("zh-TW"),
            "Croatian": getLanguage("hr"),
            "Czech": getLanguage("cs"),
            "Danish": getLanguage("da"),
            "Dutch": getLanguage("nl"),
            "Estonian": getLanguage("et"),
            "English": getLanguage("en"),
            "Finnish": getLanguage("fi"),
            "French": getLanguage("fr"),
            "German": getLanguage("de"),
            "Greek": getLanguage("el"),
            "Hebrew": getLanguage("he"),
            "Hungarian": getLanguage("hu"),
            "Indonesian": getLanguage("id"),
            "Italian": getLanguage("it"),
            "Japanese": getLanguage("ja"),
            "Korean": getLanguage("ko"),
            "Latvian": getLanguage("lv"),
            "Lithuanian": getLanguage("lt"),
            "Norwegian": getLanguage("nb"),
            "Polish": getLanguage("pl"),
            "Portuguese (Brazil)": getLanguage("pt-BR"),
            "Portuguese (Portugal)": getLanguage("pt-PT"),
            "Romanian": getLanguage("ro"),
            "Russian": getLanguage("ru"),
            "Serbian": getLanguage("sr"),
            "Slovak": getLanguage("sk"),
            "Slovenian": getLanguage("sl"),
            "Spanish": getLanguage("es"),
            "Swedish": getLanguage("sv"),
            "Thai": getLanguage("th"),
            "Turkish": getLanguage("tr"),
            "Ukrainian": getLanguage("uk").addTo(map),
            "Vietnamese": getLanguage("vi")
          };
    
          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
    107
    108
    109
    110
    111
    112
          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

In CodePen, run your code to display the map.

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

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.