Experiment: HTMLMapmlViewerElement.matchMedia('(prefers-lang: xx)')

This page uses the HTMLMapmlViewerElement.matchMedia function to select map content based on the browser's preferred language setting, in the user's language, ideally.

If your browser isn't set to prefer english or french , the map should display the OpenStreetMap base layer. Otherwise, it will display the Canada Base Map layer in english or french, accordingly.

How to Set or Change Your Browser's Preferred Language (navigator.language)

• Google Chrome:
  • Go to chrome://settings/languages and add languages, in the order of your preference, in which you wish to display content. Content is presented in the preferred language (preference established by list order), if available. Set the first 'preferred' language to a language and locale. This establishes the language of the browser's menus etc. Push restart for new settings to take effect.
• Mozilla Firefox:
  • Go to about:preferences, scroll down to "Language", and click the button titled "Choose..." beside the label "Choose your preferred language for displaying pages". Add languages in which you wish to display content in order of your preference. Content is presented in order of preference, if available.
• Microsoft Edge:
  • Open edge://settings/languages and add languages. Set the first 'preferred' language to any language and locale. Restart the browser for the setting to take effect.

Manipulating these settings will allow you to see how the mapml-viewer element adapts to different language settings used by users.