Translate UI to other languages

[ygoe]

Motivation

https://docs.mapbox.com/mapbox-gl-js/example/cooperative-gestures/

This feature adds the text "Use ctrl + scroll to zoom the map" or "Use two fingers to move the map" to the map UI. It's in English and looks hard-coded. My application is in German and would prefer a translated text for these labels.

Besides that, I'd prefer the spelling "Ctrl+Scroll" or "Ctrl+scroll" (without spacing). Or completely change the English text to "Hold the Ctrl key while scrolling to zoom the map" which avoids jargon like "+" and makes clear we're talking about a key. A key that most average users have very little contact with. Some keyboards also have "Control" printed on it (but not in German, that would be too long). And what about Macs actually? (I don't have one but I know folks.)

Design Alternatives

I have to apply a few tweaks and fixes to the map anyway, so I could find the element and change its textContent to show whatever text I like.

Design

No idea

Mock-Up

Devs should have an API to set the UI language, or it should react to the page's lang attribute or the user-agent's Accept-Language header.

Users see text in the same language as the rest of the page.

Concepts

Implementation

[ygoe]

Here's my full fix for these messages:

// Improve touch-pan and scroll-zoom blocker messages
let modifyBlocker = (name, text) => {
	let element = mapContainer.querySelector("div.mapboxgl-" + name + "-blocker");
	element.style.background = "rgb(0, 0, 0, 0.4)";
	element.style.padding = "0 2rem";
	element.style.fontSize = "1.6em";
	element.style.lineHeight = "1.3";
	element.style.textShadow = "0 0 0.25em black";
	element.textContent = text;
};
modifyBlocker("touch-pan", "Use two fingers to move the map");
modifyBlocker("scroll-zoom", "Hold the Ctrl key while scrolling to zoom the map");
// German translations
//modifyBlocker("touch-pan", "Verschieben der Karte mit zwei Fingern");
//modifyBlocker("scroll-zoom", "Zoomen der Karte mit gedrückter Strg-Taste");

[mourner]

You can use the Map locale option to override these strings. Also note that we're working on more extensive localization, see #11733.

[ygoe]

Oh, other strings, yes, where can I find the "Improve this map" text? It's not in that list but shown in the attribution control.

Edit: Never mind, it's in the other PR. Should have read that first.

[chriszrc]

@ygoe @mourner I actually have the same question, providing the following in the locale option:

"AttributionControl.MapFeedback": "Rétroaction sur la carte",

Only replaces the aria-label, not the actual displayed link text:

[gregholst]

@chriszrc Did you find a solution to this?

[chriszrc]

@gregholst unfortunately no, look how everything is in french on this page, except the "Improve this map" text 😭

https://cdn.zevross.com/univcan/scholars/v2/?lang=fr

[stepankuzmin]

Hi @gregholst @chriszrc 👋

You can pass your attribution string using the customAttribution option in AttributionControl:

const map = new mapboxgl.Map({attributionControl: false})
    .addControl(new mapboxgl.AttributionControl({
        customAttribution: 'Map design by me'
    }));

Yoy can also use customAttribution with the Map constructor with attributionControl: true

[gregholst]

@stepankuzmin
As far as I can see the customAttribution is added to the existing attribution, which is the something like "Custom attribution text | c Mapbox c OpenStreetMap Improve this map". I know that one can completely remove the attribution and replace it with some custom built attribution. But my goal was just to translate "Improve this map" to German. When I rebuild the complete attribution I will need to create the Improve this map link with custom variables (it consists of zoom and coordinates), show the (i) icon when the map is shown on the mobile screen and so on. It will be doable, but more practical would be a simple property to change so that "Improve this map" can be translated for my non-English audience. (just like the text for mouse over of zoom controls can be changed etc.)

[stepankuzmin]

Yes, sorry for the confusion. The translation of the attribution is not available at the moment, but it will be available after we roll out the internationalization support.

[gregholst]

@gregholst unfortunately no, look how everything is in french on this page, except the "Improve this map" text 😭

https://cdn.zevross.com/univcan/scholars/v2/?lang=fr

Nice map! If you want even more French then consider changing also the map labels. At least for my capital Vienna I know you say Vienne. Check here, although the example does not work well for me: https://docs.mapbox.com/mapbox-gl-js/example/language-switch/ At least my implementation works quite well :)

[chriszrc]

@gregholst unfortunately no, look how everything is in french on this page, except the "Improve this map" text 😭
https://cdn.zevross.com/univcan/scholars/v2/?lang=fr

Nice map! If you want even more French then consider changing also the map labels. At least for my capital Vienna I know you say Vienne. Check here, although the example does not work well for me: https://docs.mapbox.com/mapbox-gl-js/example/language-switch/ At least my implementation works quite well :)

@gregholst the map labels already do change, but only when the primary browser language is actually set to french-

[stepankuzmin]

Just a tiny sneak peek — Language Switch plugin would become obsolete after the proper i18n support release. It'd be a simple language: 'auto' | string and worldview: string options on the Map constructor along with the setLanguage/setWorldview methods.