Add translation process and small fixes (#930)

## Launch Checklist

This adds information about how to translate Maputnik and how to get in
touch with people who have translated in the past.
@keichan34, @jieme, @lhapaipai - I need your approval for this so that
people in the future will know to contact you in case text is being
added and they need help translating it.

CC: @ianthetechie 

I've also changed the word "Language" in the upper part of the screen so
that it won't be translated in case you accidentally switch language,
and you need to switch back.

I've also fixed some RTL issues in the CSS and updated the maplibre
components labels when the language changes.

README.md

@@ -36,6 +36,8 @@ Maputnik is written in typescript and is using [React](https://github.com/facebo
 
 We ensure building and developing Maputnik works with the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
 
+Check out our [Internationalization guide](./src/locales/README.md) for UI text related changes. 
+
 ### Getting Involved
 Join the #maplibre or #maputnik slack channel at OSMUS: get an invite at https://slack.openstreetmap.us/ Read the the below guide in order to get familiar with how we do things around here.
 

src/components/AppToolbar.tsx

@@ -230,7 +230,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
 
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
-            <label>{t("View")}
+            <IconText>{t("View")}
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-select"
@@ -254,12 +254,12 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   })}
                 </optgroup>
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarSelect wdKey="nav:language">
             <MdLanguage />
-            <label>{t("Language")}
+            <IconText>Language
               <select
                 className="maputnik-select"
                 data-wd-key="maputnik-lang-select"
@@ -274,7 +274,7 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
                   );
                 })}
               </select>
-            </label>
+            </IconText>
           </ToolbarSelect>
 
           <ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>

src/components/MapMaplibreGl.tsx

@@ -14,6 +14,7 @@ import '../libs/maplibre-rtl'
 import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
+import i18next from 'i18next'
 
 function renderPopup(popup: JSX.Element, mountNode: ReactDOM.Container): HTMLElement {
   ReactDOM.render(popup, mountNode);
@@ -67,9 +68,11 @@ type MapMaplibreGlInternalProps = {
 } & WithTranslation;
 
 type MapMaplibreGlState = {
-  map: Map | null
-  inspect: MaplibreInspect | null
-  zoom?: number
+  map: Map | null;
+  inspect: MaplibreInspect | null;
+  geocoder: MaplibreGeocoder | null;
+  zoomControl: ZoomControl | null;
+  zoom?: number;
 };
 
 class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps, MapMaplibreGlState> {
@@ -87,7 +90,12 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     this.state = {
       map: null,
       inspect: null,
+      geocoder: null,
+      zoomControl: null,
     }
+    i18next.on('languageChanged', () => {
+      this.forceUpdate();
+    })
   }
 
 
@@ -125,6 +133,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
         this.state.inspect!.render();
       }, 500);
     }
+
   }
 
   componentDidMount() {
@@ -152,9 +161,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     map.showCollisionBoxes = mapOpts.showCollisionBoxes!;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector!;
 
-    this.initGeocoder(map);
+    let geocoder = this.initGeocoder(map);
 
-    const zoomControl = new ZoomControl(this.props.t("Zoom:"));
+    const zoomControl = new ZoomControl();
     map.addControl(zoomControl, 'top-right');
 
     const nav = new MapLibreGl.NavigationControl({visualizePitch:true});
@@ -189,6 +198,8 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       this.setState({
         map,
         inspect,
+        geocoder,
+        zoomControl,
         zoom: map.getZoom()
       });
     })
@@ -261,10 +272,13 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       maplibregl: MapLibreGl,
     });
     map.addControl(geocoder, 'top-left');
+    return geocoder;
   }
 
   render() {
     const t = this.props.t;
+    this.state.geocoder?.setPlaceholder(t("Search"));
+    this.state.zoomControl?.setLabel(t("Zoom:"));
     return <div
       className="maputnik-map__map"
       role="region"

src/libs/zoomcontrol.ts

@@ -5,18 +5,14 @@ export default class ZoomControl {
   _container: HTMLDivElement | undefined = undefined;
   _textEl: HTMLSpanElement | null = null;
 
-  constructor(public label: string) {}
+  constructor() {}
 
   onAdd(map: Map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group maplibregl-ctrl-zoom';
     this._container.setAttribute("data-wd-key", "maplibre:ctrl-zoom");
-    this._container.innerHTML = `
-      ${this.label} <span></span>
-    `;
-    this._textEl = this._container.querySelector("span");
-
+    this.setLabel("Zoom:");
     this.addEventListeners();
 
     return this._container;
@@ -25,6 +21,14 @@ export default class ZoomControl {
   updateZoomLevel() {
     this._textEl!.innerHTML = this._map!.getZoom().toFixed(2);
   }
+
+  setLabel(label: string) {
+    this._container!.innerHTML = `
+      ${label} <span></span>
+    `;
+    this._textEl = this._container!.querySelector("span");
+    this.updateZoomLevel();
+  }
 
   addEventListeners (){
     this._map!.on('render', () => this.updateZoomLevel());

src/locales/README.md

@@ -0,0 +1,25 @@
+## Internationalization
+
+The process of internationlization is pretty straight forward for Maputnik.
+
+In order to add a new translation you'll need to create a new folder and a json file with the relevant language code and make sure all the keys are translated.
+The following users can help you with the relevant languages:
+
+- English - @HarelM
+- Japanese - @keichan34
+- Simplified Chinese - @jieme
+- Hebrew - @HarelM
+- French - @lhapaipai 
+
+If you happen to add a feature which needs some text to be translated, update the translation files.
+After running, check your working copy for files and add/correct as needed.
+
+```
+npm run i18n:refresh
+```
+
+You can test the UI in different languages using the dropdown in the top menu
+Note that Maputnik automatically localize based on browser language settings and stores this language in local storage.
+You can use incognito mode to check a first time usage.
+
+

src/styles/_export.scss

@@ -10,7 +10,7 @@
   }
 
   input.maputnik-string {
-    margin-left: 5px;
+    margin: 0 5px;
     width: 60%;
     display: inline-block;
   }

src/styles/_filtereditor.scss

@@ -18,7 +18,7 @@
 }
 
 .maputnik-filter-editor-operator {
-  margin-left: 2%;
+  margin: 0 2%;
   display: inline-block;
   width: 17%;
 
@@ -30,7 +30,7 @@
 .maputnik-filter-editor-args {
   display: inline-block;
   width: 54%;
-  margin-left: 2%;
+  margin: 0 2%;
 
   .maputnik-string,
   .maputnik-number {

src/styles/_input.scss

@@ -107,6 +107,9 @@
 
   height: 24px;
 }
+[dir="rtl"] .maputnik-select {
+  background: $color-gray url("#{$icon-down-arrow}") left center no-repeat;
+}
 
 // MULTIBUTTON
 .maputnik-multibutton {

src/styles/_layer.scss

@@ -178,7 +178,7 @@
   }
 
   &-group-content {
-    margin-left: $margin-3;
+    margin: 0 $margin-3;
   }
 }
 

src/styles/_popup.scss

@@ -22,7 +22,7 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: 1.6em;
+  padding-right: $margin-2;
   background-color: $color-midgray;
   color: $color-white;
 }
@@ -33,6 +33,7 @@
   .maputnik-input-block {
     margin: 0;
     margin-left: $margin-2;
+    margin-right: $margin-2;
     margin-top: $margin-2;
   }
 }
@@ -44,4 +45,5 @@
 .maputnik-popup-table-cell {
   color: $color-lowgray;
   padding-left: $margin-2;
+  padding-right: $margin-2;
 }

src/styles/_toolbar.scss

@@ -87,7 +87,7 @@
 
 .maputnik-toolbar-version {
   font-size: 10px;
-  margin-left: 4px;
+  margin: 0 4px;
   white-space: nowrap;
 }
 
@@ -103,7 +103,7 @@
   @extend .maputnik-toolbar-link; /* stylelint-disable-line */
 
   select {
-    margin-left: 6px;
+    margin: 0 6px;
     border-width: 0;
     display: inline;
     width: auto;
@@ -114,12 +114,12 @@
 }
 
 .maputnik-icon-text {
-  padding-left: $margin-1;
+  padding: 0 $margin-1;
 }
 
 .maputnik-icon-action {
   display: inline;
-  margin-left: $margin-1;
+  margin: 0 $margin-1;
 }
 
 .maputnik-toolbar__inner {

src/styles/index.scss

@@ -102,8 +102,7 @@
 
     &:not(:first-child)
     {
-      padding-top: $margin-1;
-      padding-left: $margin-2;
+      padding: $margin-1;
     }
 
     &:nth-child(1) {