Dynamically Localize Your Maps with Our New Internationalization Capability

Guest

No items found.

Guest

November 30, 2022

Dynamically Localize Your Maps with Our New Internationalization Capability

Guest

No items found.

Guest

November 30, 2022

We are committed to constantly improving the mapping experience, which is why we're excited to share an upcoming new Mapbox Maps Internationalization capability. This new capability will improve both your global user experience and your developer experience on the backend. Maps Internationalization is currently in private preview.

With Mapbox Maps Internationalization, you can build maps for web and mobile that dynamically render in the local language and worldview based on the user's device and browser preference. It eliminates the need to build potentially hundreds of discreet styles – one for each permutation of language and worldview – saving hours or even days of coding and verification, not to mention future maintenance.

What is Internationalization?

Internationalization is the process of Mapbox enabling our products to dynamically adapt to the various languages and worldviews needed by the users of our customers’ apps and services. Mapbox Internationalization technology takes into account an end user's preferred language and worldview on their mobile device or browser to dynamically adapt when rendering the map.

What Roles do Localization and Worldview Play in Internationalization?

Localization in this maps context is when a website or app adapts the translations of geographic, place or street names and directions to match the language of a specific locale. For example, German speakers in Germany may call the city München, while English speakers outside of Germany may call the city Munich. Internationalization must be in place for a Mapbox customer to localize their maps dynamically for the German or English speaker.

Worldview in this maps context is the framework that people use to make sense of their location and its relationships with other locations. For example, different users in different countries may have a different idea of where the borders of their country lie geographically.

The Current Challenge of Localizing Maps

Mapbox currently supports the localization of maps; however, it’s difficult and time consuming because developers must create potentially hundreds of individual styles for every permutation of language and worldview needed to support their end user’s preferences. Similarly, they can install a GL plug-in to modify styles at runtime for each language, but it is suboptimal due to resource and performance limitations. When a new language or worldview is supported, an upgrade or update to the most recent version of the web or mobile platform is required to access the language.

Mapbox Internationalization Makes Localizing Maps Easy

With the new Mapbox Maps Internationalization capability, you can quickly and easily configure the language and worldview of your maps based on the device or browser preferences of your end users. No more building and maintaining hundreds of styles. With a more finite number of styles, the map loads dynamically and more quickly based on the users device or browser. New languages are supported as they are added with no need for updates or upgrades.

You can now save time and resources, and organize your styles better because Internationalization eliminates the large number of styles needed to localize maps. You can also more easily meet government regulations for language options and worldview. And ultimately, you can more smoothly deliver to your end user the language experience they expect in their maps.

Your end users now get to view maps seamlessly and easily in their preferred language and worldview, making understanding, engaging and navigating easy and intuitive. Rendering is dynamic and fast based on preferences in the device or browser, so users do not need to manually select a language display on the map. And finally, the map language can match their app language, preventing confusion or frustrations.

What languages are supported in Maps Internationalization? 

Mapbox Maps Internationalization expands our supported language offering to 34 languages and eight worldviews, compared to the 13 languages and four worldviews previously supported.

.tg {border-collapse:collapse;border-spacing:0;}.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;}.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}.tg .tg-5xqe{background-color:#000000;text-align:center;vertical-align:top}.tg .tg-3to3{background-color:#007afc;color:#ffffff;font-size:20px;font-weight:bold;text-align:center;vertical-align:top}
Languages Worldviews
Arabic German Polish Swedish Japan
Czech Greek Portuguese (BR) Thai India
Danish Hebrew (Modern) Portuguese (PT) Turkish China
Dutch (NL) Hungarian Romanian Ukrainian Unites States
Dutch (BE) Indonesian Russian Vietnamese Russia
English (UK) Italian Slovak Simplified Chinese Turkiye
English (US) Japanese Slovenien Traditional Chinese Argentina
Finnish Korean (KR) Spanish (MX) Morocco
French (CA) Norwegian Spanish (ES) French

Who benefits from Maps Internationalization? 

Internationalization is useful for organizations with global operations that need to configure language and worldview for an international user base or to conform to local government regulation or customer preferences. 

Below are just a few use cases:

Weather Organizations DisPlaY Weather Maps in the Local Language

A weather company provides coverage for users based on a regional location such as city or zip code, and they need extended language support in their base maps to support their large global user base. They also don't want to build hundreds of extra custom styles to ensure their maps render and localize in the correct language.

With Maps Internationalization, end users are able to view the weather of any location in the world, in the language defined in their browser or device settings. Users do not need to select the language display on the map - they’ve already defined their language preference and the map reflects this through the browser or device locale value. On the backend, developers don't need to build a single new custom style for every single new language and worldview permutation they need.

Automakers can localize their navigation across regions

Similarly, the auto industry supports a global market. It's critical for automakers to offer maps and navigation that support languages across all locations where different models are sold and then operated.

For example, an automaker that wants to use Mapbox for in-car navigation services in Western Europe will need support for more than 20 languages and at least 3 worldviews. Their map labels would need to reflect the language preference defined by the driver, and a dealer would need to initialize the car to the current worldview before it’s sold.

The customizable suite of Mapbox mobile and navigation SDKs allows for flexible configurations. For example, the dealership could set a vehicle’s worldview and the driver can still have the option to select their preferred language. Maps Internationalization also automates the translation experience for drivers to ensure the labels are personalized based on their language preference and locale.

Place labels, such as country, state, and city, often have different translations across languages, like the Munich example listed earlier. Meanwhile roads are less likely to contain translations and are commonly referred to by their local name. Mapbox ensures that map labels are automatically translated when necessary, but also displays local names when appropriate.

The map language matches the app language on Social Media apps

Social media sites with an international footprint need to cater to audiences across the globe, and localization is key to enable content access to all users.

For example, a company’s app supports 30 languages. To optimize the user experience, the organization will want to automatically have localized maps for each country that matches the supported language in the application. Map labels must reflect the user's device or browser preferences. 

Mapbox internationalization prevents the undesirable outcome in which the language content in the app is different from the language displayed on in-app maps. Mapbox enables social media customers to scale language support quickly. If a language is not available, the local name of places will be displayed to the user, ensuring a localized map.

Localize Your maps with Mapbox

With Maps Internationalization, localizing your maps is quick and easy. This capability is currently available in Private Preview.

Below is example code demonstrating how a language or locale setting on a mobile device can pass through our Mobile SDKs and localize the map:

.article-rich-text .w-embed:nth-last-of-type(1), .article-rich-text .w-embed:nth-last-of-type(2), .article-rich-text .w-embed:nth-last-of-type(3){ margin-top: 0 !important; margin-bottom: 0 !important; } .article-rich-text .w-embed pre { margin-top: 0 !important; }

// Create a settings service instance as PERSISTENT, the
// language set will be persisted across the application lifecycle.
private val settingsService: SettingsServiceInterface by lazy {
SettingsServiceFactory.getInstance(
SettingsServiceStorageType.PERSISTENT
)
}
val locale = context.getResources().getConfiguration().locale
// set language in bcp-47 tag
val language = locale.language().toLanguageTag();
settingsService.set(MapboxCommonSettings.LANGUAGE, Value(language))

// set worldview
val worldView = "US"
settingsService.set(MapboxCommonSettings.WORLDVIEW, Value(worldView))

Below is a code example of how you could force a locale through the Mobile SDKs.

.article-rich-text .w-embed:nth-last-of-type(1), .article-rich-text .w-embed:nth-last-of-type(2), .article-rich-text .w-embed:nth-last-of-type(3){ margin-top: 0 !important; margin-bottom: 0 !important; } .article-rich-text .w-embed pre { margin-top: 0 !important; }

val language = Locale.JAPANESE.toLanguageTag();
settingsService.set(MapboxCommonSettings.LANGUAGE, Value(language))

We also want to note another new feature that is currently in private preview - the ability to preview a map in Mapbox Studio. Once live, you'll be able to select a language and worldview and preview how the map will look before you publish. With the new Internationalization capability, more languages and worldviews will be added.

If you aren’t developing on Mapbox already, then create an account for free today and get started.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

response = requests.get(

  "https://api.mapbox.com/v4/mapbox.temperature-raster-tileset/tilequery/40,-105.json",

    params={

        "layers": "temperature,wind_speed",

        "bands": "1708304400,1708311600",

    },

Optional caption
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod maximus porta. Pellentesque vitae augue elit. Nam semper eros leo, nec hendrerit nunc aliquet quis. Morbi ac sapien tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur porta imperdiet lorem, ut aliquet orci pellentesque quis. Donec magna augue, molestie aliquam enim eu, auctor feugiat metus."

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

No items found.
No items found.