Learn how to localize place labels using the basemap styles service v2.
The basemap styles service v2 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 Developer or ArcGIS Online account to access the developer dashboard and create an API key.
Steps
Create a new pen
- Go to CodePen to create a new pen for your application.
Set the API key
To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.
-
Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.
-
In CodePen, update
api
to use your key.Key Use dark colors for code blocks const map = L.map("map", { minZoom: 2 }) map.setView([34.02, -118.805], 13); const apiKey = "YOUR_API_KEY"; const basemapEnum = "arcgis/streets"; L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey }).addTo(map);
Create a basemap language function
Create a function that accepts a language code and returns a basemap style formatted with that language.
-
Define a new
get
function that accepts a language code and returns aLanguage Vector
.Basemap Layer Use dark colors for code blocks const apiKey = "YOUR_API_KEY"; const basemapStyle = 'arcgis/outdoor'; function getLanguage(languageCode) { return L.esri.Vector.vectorBasemapLayer(basemapStyle, ) }
-
In the basemap layer properties, set the
language
option to yourlanguage
. SetCode version:
to access the new v2 styles service, and pass your API key.2 Use dark colors for code blocks const basemapStyle = 'arcgis/outdoor'; function getLanguage(languageCode) { return L.esri.Vector.vectorBasemapLayer(basemapStyle, { language: languageCode, version: 2, apikey: apiKey } ) }
Add a language selector
Add a menu that allows users to change the display language of your map.
-
Create a new
languages
object. For each supported language, call theget
function with its language code.Language Use dark colors for code blocks function getLanguage(languageCode) { return L.esri.Vector.vectorBasemapLayer(basemapStyle, { language: languageCode, version: 2, apikey: apiKey } ) } 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") };
-
Create a Leaflet
Control
and add it to your map. Pass thelanguages
object to display all of the supported languages.Use dark colors for code blocks 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);
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.
-
Call the L.Esri.Vector.setRTLTextPlugin with the URL of the Mapbox GL RTL Text plugin to configure support for RTL languages.
Use dark colors for code blocks 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');
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: