Fix localization issues (#31)

.nvmrc

@@ -1 +1 @@
-v16
+v14

demo/index.ts

@@ -45,8 +45,9 @@ const languageControl = new mapgl.Control(
     map,
     `
         <select>
-            <option>EN</option>
-            <option>RU</option>
+            <option>en</option>
+            <option>ru</option>
+            <option>ar</option>
         </select>
     `,
     {

src/l10n.ts

@@ -1,8 +1,6 @@
-/**
- * @hidden
- * @internal
- */
-export const dictionary = {
+const DEFAULT_LOCALE = 'en';
+
+const DICTIONARY = {
     start: {
         en: 'Start',
         ru: 'Старт',
@@ -19,4 +17,14 @@ export const dictionary = {
         en: 'km',
         ru: 'км',
     },
-};
+} as const;
+
+type L10nKey = keyof typeof DICTIONARY;
+
+/**
+ * @hidden
+ * @internal
+ */
+export function getTranslation(key: L10nKey, locale: string = DEFAULT_LOCALE) {
+    return DICTIONARY[key][locale] ?? DICTIONARY[key][DEFAULT_LOCALE];
+}

src/polygon.ts

@@ -4,7 +4,7 @@ import { area } from './geo/area';
 import { centroid } from './geo/centroid';
 import { GeoPoint } from './types';
 import { style } from './style';
-import { dictionary } from './l10n';
+import { getTranslation } from './l10n';
 
 /**
  * @internal
@@ -80,10 +80,10 @@ export class Polygon {
 function getLabelText(area: number, lang: string) {
     lang = lang.toLowerCase();
     if (area < 1e5) {
-        return `${area.toFixed(1)} ${dictionary.meter[lang]}²`;
+        return `${area.toFixed(1)} ${getTranslation('meter', lang)}²`;
     }
 
-    return `${(area / 1e6).toFixed(1)} ${dictionary.kilometer[lang]}²`;
+    return `${(area / 1e6).toFixed(1)} ${getTranslation('kilometer', lang)}²`;
 }
 
 function createLabel(map: mapgl.Map, coordinates: GeoPoint, area: number): mapgl.Label {

src/snapPoint.ts

@@ -1,7 +1,7 @@
 import { GeoPoint, SnapInfo } from './types';
 import { createHtmlMarker, getJointDistanceText, getLabelHtml, getSnapLabelHtml } from './utils';
 import { style } from './style';
-import { dictionary } from './l10n';
+import { getTranslation } from './l10n';
 
 /**
  * @hidden
@@ -74,7 +74,7 @@ function createLabel(map: mapgl.Map, coordinates: GeoPoint, distance: number) {
 function getLabelText(map: mapgl.Map, distance: number) {
     const lang = map.getLanguage().toLowerCase();
     const distanceText = getJointDistanceText(distance, false, lang);
-    const addJointText = dictionary.addPoint[lang] || dictionary.addPoint.en;
+    const addJointText = getTranslation('addPoint', lang);
 
     return getSnapLabelHtml(distanceText, addJointText);
 }

src/utils.ts

@@ -1,6 +1,6 @@
 import { GeoPoint, ScreenPoint, SnapInfo } from './types';
 import { Joint } from './joint';
-import { dictionary } from './l10n';
+import { getTranslation } from './l10n';
 import { style } from './style';
 import { JOINT_REMOVE_BUTTON_SVG } from './constants';
 import css from './index.module.css';
@@ -20,16 +20,16 @@ export function getJointDistanceText(
     lang = lang.toLowerCase();
 
     if (first) {
-        return dictionary.start[lang] || dictionary.start.en;
+        return getTranslation('start', lang);
     }
 
     if (distance < 1000) {
-        return `${distance} ${dictionary.meter[lang] || dictionary.meter.en}`;
+        return `${distance} ${getTranslation('meter', lang)}`;
     }
 
     const kmDist = (distance / 1000).toFixed(1);
 
-    return `${kmDist} ${dictionary.kilometer[lang] || dictionary.kilometer.en}`;
+    return `${kmDist} ${getTranslation('kilometer', lang)}`;
 }
 
 /**