Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate UI to other languages #12109

Closed
ygoe opened this issue Jul 22, 2022 · 12 comments
Closed

Translate UI to other languages #12109

ygoe opened this issue Jul 22, 2022 · 12 comments

Comments

@ygoe
Copy link

ygoe commented Jul 22, 2022

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
Copy link
Author

ygoe commented Jul 22, 2022

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
Copy link
Member

mourner commented Jul 26, 2022

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

@mourner mourner closed this as completed Jul 26, 2022
@ygoe
Copy link
Author

ygoe commented Jul 26, 2022

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
Copy link

@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:

Screen Shot 2022-10-12 at 11 07 54 AM

@gregholst
Copy link

@chriszrc Did you find a solution to this?

@chriszrc
Copy link

@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
Copy link
Contributor

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
Copy link

@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
Copy link
Contributor

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
Copy link

gregholst commented Jan 30, 2023

@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
Copy link

chriszrc commented Jan 30, 2023

@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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants