Add translation process and small fixes

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) {