diff --git a/CHANGELOG.md b/CHANGELOG.md index 051471f7..61ab3ed5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## 2.4.1 ### Bug Fixes - The class `AJAXError` is now imported as part of the `maplibregl` namespace (CommonJS limitation from Maplibre GL JS) (https://github.com/maptiler/maptiler-sdk-js/pull/129) +- The `Map` constructor can now also take a language as a string (https://github.com/maptiler/maptiler-sdk-js/pull/131) ## 2.4.0 ### New Features diff --git a/images/screenshots/visitor_athen.png b/images/screenshots/visitor_athen.png new file mode 100644 index 00000000..1d36e408 Binary files /dev/null and b/images/screenshots/visitor_athen.png differ diff --git a/images/screenshots/visitor_osaka.png b/images/screenshots/visitor_osaka.png new file mode 100644 index 00000000..5291bfcb Binary files /dev/null and b/images/screenshots/visitor_osaka.png differ diff --git a/readme.md b/readme.md index 7fb48366..b1d96306 100644 --- a/readme.md +++ b/readme.md @@ -468,7 +468,7 @@ Whenever a label is not supported in the defined language, it falls back to `Lan Here is a sample of some compatible languages: ![](images/screenshots/multilang.gif) -# Built-in support for right-to-left languages +## Built-in support for right-to-left languages Languages that are written right-to-left such as Arabic and Hebrew are fully supported by default. No need to install any plugins!

@@ -476,6 +476,31 @@ Languages that are written right-to-left such as Arabic and Hebrew are fully sup

+## Visitor language modes +The *visitor* language modes are special built-in modes made to display labels in two different languages, concatenated when available: +- `Language.VISITOR` concatenates labels in the language of your system and the *local* language +- `Language.VISITOR_ENGLISH` concatenates labels in English and the *local* language + +```ts +const map = new Map({ + // some options... + language: Language.VISITOR, +}) + +// or + +const map = new Map({ + // some options... + language: Language.VISITOR_ENGLISH, +}) +``` + +We believe these two modes can be very handy to help the end users identify places, especially when the local labels are not using a latin charset. Here is how it looks like: + +![](images/screenshots/visitor_athen.png) +![](images/screenshots/visitor_osaka.png) + + # Custom Events and Map Lifecycle ## Events ### The `ready` event diff --git a/src/Map.ts b/src/Map.ts index 8c2fda21..57ca4c96 100644 --- a/src/Map.ts +++ b/src/Map.ts @@ -75,11 +75,12 @@ export type MapOptions = Omit & { style?: ReferenceMapStyle | MapStyleVariant | StyleSpecification | string; /** - * Define the language of the map. This can be done directly with a language ISO code (eg. "en") + * Define the language of the map. This can be done directly with a language ISO code (eg. "en"), + * the ISO code prepended with the OSM flag (eg. "name:en" or even just "name"), * or with a built-in shorthand (eg. Language.ENGLISH). * Note that this is equivalent to setting the `config.primaryLanguage` and will overwrite it. */ - language?: LanguageInfo; + language?: LanguageInfo | string; /** * Define the MapTiler Cloud API key to be used. This is strictly equivalent to setting @@ -300,7 +301,13 @@ export class Map extends maplibregl.Map { registerLocalCacheProtocol(); } - this.primaryLanguage = options.language ?? config.primaryLanguage; + if (typeof options.language === "undefined") { + this.primaryLanguage = config.primaryLanguage; + } else { + const providedlanguage = toLanguageInfo(options.language, Language); + this.primaryLanguage = providedlanguage ?? config.primaryLanguage; + } + this.forceLanguageUpdate = this.primaryLanguage === Language.STYLE || this.primaryLanguage === Language.STYLE_LOCK ? false : true; this.languageAlwaysBeenStyle = this.primaryLanguage === Language.STYLE;