feat: add support for map controls localization (requires mapbox-gl >…

…= 1.6.0)

projects/ngx-mapbox-gl/src/lib/map/map.component.ts

@@ -66,6 +66,7 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
   @Input() transformRequest?: Function;
   @Input() bounds?: LngLatBoundsLike; // Use fitBounds for dynamic input
   @Input() antialias?: boolean;
+  @Input() locale: { [key:string]: string };
 
   /* Dynamic inputs */
   @Input() minZoom?: number;
@@ -193,7 +194,8 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
         transformRequest: this.transformRequest,
         bounds: this.bounds ? this.bounds : this.fitBounds,
         fitBoundsOptions: this.fitBoundsOptions,
-        antialias: this.antialias
+        antialias: this.antialias,
+        locale: this.locale
       },
       mapEvents: this
     });

projects/showcase/src/app/demo/demo.module.ts

@@ -17,6 +17,7 @@ import { AttributionPositionComponent } from './examples/attribution-position.co
 import { CenterOnSymbolComponent } from './examples/center-on-symbol.component';
 import { ClusterHtmlComponent, ClusterPointComponent } from './examples/cluster-html.component';
 import { ClusterComponent } from './examples/cluster.component';
+import { CustomLocaleComponent } from './examples/custom-locale.component';
 import { CustomMarkerIconsComponent } from './examples/custom-marker-icons.component';
 import { CustomStyleIdComponent } from './examples/custom-style-id.component';
 import { DisplayMapComponent } from './examples/display-map.component';
@@ -103,6 +104,7 @@ export const DEMO_ROUTES: Routes = [
       { path: 'polygon-popup-on-click', component: PolygonPopupOnClickComponent, data: { label: 'Show polygon information on click', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: 'add-image-missing-generated', component: AddImageMissingGeneratedComponent, data: { label: 'Generate and add a missing icon to the map', cat: Category.STYLES } },
       { path: 'custom-attribution', component: CustomAttributionComponent, data: { label: 'Add custom attributions', cat: Category.CONTROLS_AND_OVERLAYS } },
+      { path: 'custom-locale', component: CustomLocaleComponent, data: { label: 'Add custom localization for controls', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: '**', redirectTo: 'display-map' }
     ]
   }
@@ -162,7 +164,8 @@ export const DEMO_ROUTES: Routes = [
     NgxClusterHtmlComponent,
     ClusterPopupComponent,
     AddImageMissingGeneratedComponent,
-    CustomAttributionComponent
+    CustomAttributionComponent,
+    CustomLocaleComponent
   ]
 })
 export class DemoModule { }

projects/showcase/src/app/demo/examples/custom-locale.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'showcase-demo',
+  template: `
+  <mgl-map
+    [style]="'mapbox://styles/mapbox/light-v9'"
+    [center]="[36.235656, 50.003870]"
+    [zoom]="[11.15]"
+    [locale]="locale"
+  >
+    <mgl-control mglFullscreen position="top-left"></mgl-control>
+    <mgl-control mglGeolocate position="top-left"></mgl-control>
+    <mgl-control mglNavigation position="top-left"></mgl-control>
+    <mgl-control mglScale></mgl-control>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css']
+})
+export class CustomLocaleComponent {
+  readonly locale = {
+    'FullscreenControl.Enter': 'Перейти в повоекранний режим',
+    'FullscreenControl.Exit': 'Вийти з повноекранного режиму',
+    'GeolocateControl.FindMyLocation': 'Знайти моє місцеположення',
+    'GeolocateControl.LocationNotAvailable': 'Місцеположення недоступне',
+    'LogoControl.Title': 'Лого Mapbox',
+    'NavigationControl.ResetBearing': 'Cкинути компас',
+    'NavigationControl.ZoomIn': 'Наблизити',
+    'NavigationControl.ZoomOut': 'Віддалити',
+    'ScaleControl.Feet': 'ф',
+    'ScaleControl.Meters': 'м',
+    'ScaleControl.Kilometers': 'км',
+    'ScaleControl.Miles': 'ми',
+    'ScaleControl.NauticalMiles': 'нм'
+  };
+}