feat(layer): add click/mouseEnter/mouseLeave Output

add language switch example
add center on symbol example

.vscode/settings.json

@@ -6,5 +6,6 @@
     "**/CVS": true,
     "**/.DS_Store": true,
     ".ng_build": true
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

e2e/language-switch.e2e-spec.ts

@@ -0,0 +1,42 @@
+import { browser, element, by, ExpectedConditions as EC } from 'protractor';
+const PixelDiff = require('pixel-diff');
+const browserLogs = require('protractor-browser-logs');
+
+describe('Language switch', () => {
+  let logs: any;
+
+  beforeEach(() => {
+    logs = browserLogs(browser);
+  });
+
+  afterEach(() => {
+    return logs.verify();
+  });
+
+  it('should change language', async () => {
+    await browser.get('/language-switch');
+    const elm = element(by.tagName('canvas'));
+    await browser.wait(EC.presenceOf(elm), 2000);
+    const buttons = await browser.findElements(by.tagName('button'));
+    await browser.sleep(4000);
+    await buttons[0].click();
+    await browser.sleep(2000);
+    const screen1 = await browser.takeScreenshot();
+    await buttons[1].click();
+    await browser.sleep(2000);
+    const screen2 = await browser.takeScreenshot();
+    const result = new PixelDiff({
+      imageA: new Buffer(screen1, 'base64'),
+      imageB: new Buffer(screen2, 'base64')
+    }).runSync();
+    expect(result.differences).toBeGreaterThan(0);
+    await buttons[0].click();
+    await browser.sleep(2000);
+    const screen1bis = await browser.takeScreenshot();
+    const result2 = new PixelDiff({
+      imageA: new Buffer(screen1, 'base64'),
+      imageB: new Buffer(screen1bis, 'base64')
+    }).runSync();
+    expect(result2.differences).toBe(0);
+  });
+});

e2e/runtime-check.e2e-spec.ts

@@ -30,7 +30,8 @@ describe('Generic runtime error check', () => {
     'locate-user',
     'ngx-attribution',
     'ngx-scale-control',
-    'interactive-false'
+    'interactive-false',
+    'center-on-symbol'
   ].forEach((route: string) => {
     it(`should display a map without errors for /${route}`, async () => {
       await browser.get(`/${route}`);

src/app/demo/examples/center-on-symbol.component.ts

@@ -0,0 +1,78 @@
+import { MapComponent } from '../../lib';
+import { Component, ViewChild } from '@angular/core';
+import { MapMouseEvent } from 'mapbox-gl';
+
+@Component({
+  template: `
+  <mgl-map
+    [style]="'mapbox://styles/mapbox/light-v9'"
+    [zoom]="8"
+    [center]="center"
+    #map
+  >
+    <mgl-geojson-source
+      id="symbols-source"
+    >
+      <mgl-feature
+        *ngFor="let geometry of geometries"
+        [geometry]="geometry"
+      ></mgl-feature>
+    </mgl-geojson-source>
+    <mgl-layer
+      id="symbols"
+      type="symbol"
+      source="symbols-source"
+      [layout]="{
+        'icon-image': 'rocket-15'
+      }"
+      (click)="centerMapTo($event)"
+      (mouseEnter)="changeCursorToPointer()"
+      (mouseLeave)="changeCursorToDefault()"
+    >
+    </mgl-layer>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css']
+})
+export class CenterOnSymbolComponent {
+  @ViewChild('map') map: MapComponent;
+
+  center = [-90.96, -0.47];
+
+  geometries = [
+    {
+      'type': 'Point',
+      'coordinates': [
+        -91.395263671875,
+        -0.9145729757782163
+
+      ]
+    },
+    {
+      'type': 'Point',
+      'coordinates': [
+        -90.32958984375,
+        -0.6344474832838974
+      ]
+    },
+    {
+      'type': 'Point',
+      'coordinates': [
+        -91.34033203125,
+        0.01647949196029245
+      ]
+    }
+  ];
+
+  centerMapTo(evt: MapMouseEvent) {
+    this.center = (<any>evt).features[0].geometry.coordinates;
+  }
+
+  changeCursorToPointer() {
+    this.map.mapInstance.getCanvas().style.cursor = 'pointer';
+  }
+
+  changeCursorToDefault() {
+    this.map.mapInstance.getCanvas().style.cursor = '';
+  }
+}

src/app/demo/examples/language-switch.component.ts

@@ -0,0 +1,40 @@
+import { Component, ViewChild } from '@angular/core';
+import { MapComponent } from '../../lib';
+
+@Component({
+  template: `
+  <mgl-map
+    style="mapbox://styles/mapbox/light-v9"
+    [zoom]="2.9"
+    [center]="[16.05, 48]"
+    #map
+  >
+    <mgl-control>
+      <button
+        mat-raised-button
+        (click)="changeLangTo('fr')"
+      >French</button>
+      <button
+        mat-raised-button
+        (click)="changeLangTo('ru')"
+      >Russian</button>
+      <button
+        mat-raised-button
+        (click)="changeLangTo('de')"
+      >German</button>
+      <button
+        mat-raised-button
+        (click)="changeLangTo('es')"
+      >Spanish</button>
+    </mgl-control>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css', './toggle-layers.component.css']
+})
+export class LanguageSwitchComponent {
+  @ViewChild('map') map: MapComponent;
+
+  changeLangTo(language: string) {
+    this.map.mapInstance.setLayoutProperty('country-label-lg', 'text-field', '{name_' + language + '}');
+  }
+}

src/app/demo/module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { MatButtonToggleModule, MatRadioModule, MatButtonModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { NgxMapboxGLModule } from '../lib/lib.module';
+import { NgxMapboxGLModule } from '../lib';
 import { AddImageGeneratedComponent } from './examples/add-image-generated.component';
 import { AddImageComponent } from './examples/add-image.component';
 import { AttachPopupComponent } from './examples/attach-popup.component';
@@ -29,7 +29,9 @@ import { LocateUserComponent } from './examples/locate-user.component';
 import { NgxAttributionComponent } from './examples/ngx-attribution.component';
 import { NgxScaleControlComponent } from './examples/ngx-scale-control.component';
 import { NgxCustomControlComponent } from './examples/ngx-custom-control.component';
-import { InteractiveFalseComponent } from './examples/interactive-false';
+import { InteractiveFalseComponent } from './examples/interactive-false.component';
+import { LanguageSwitchComponent } from './examples/language-switch.component';
+import { CenterOnSymbolComponent } from './examples/center-on-symbol.component';
 
 export const demoRoutes: Routes = [
   { path: '', component: IndexComponent },
@@ -56,6 +58,8 @@ export const demoRoutes: Routes = [
   { path: 'ngx-scale-control', component: NgxScaleControlComponent },
   { path: 'ngx-custom-control', component: NgxCustomControlComponent },
   { path: 'interactive-false', component: InteractiveFalseComponent },
+  { path: 'language-switch', component: LanguageSwitchComponent },
+  { path: 'ngx-center-on-symbol', component: CenterOnSymbolComponent },
 ];
 
 @NgModule({
@@ -96,7 +100,9 @@ export const demoRoutes: Routes = [
     NgxAttributionComponent,
     NgxScaleControlComponent,
     NgxCustomControlComponent,
-    InteractiveFalseComponent
+    InteractiveFalseComponent,
+    LanguageSwitchComponent,
+    CenterOnSymbolComponent
   ]
 })
 export class DemoModule { }

src/app/lib/layer/layer.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 import {
   BackgroundLayout,
   CircleLayout,
@@ -20,7 +20,8 @@ import {
   LinePaint,
   SymbolPaint,
   RasterPaint,
-  CirclePaint
+  CirclePaint,
+  MapMouseEvent
 } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 
@@ -34,9 +35,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   @Input() source?: string | VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource | GeoJSONSourceRaw;
   @Input() type?: 'symbol' | 'fill' | 'line' | 'circle' | 'fill-extrusion' | 'raster' | 'background';
   @Input() metadata?: any;
-  @Input() ref?: string;
   @Input() sourceLayer?: string;
-  @Input() interactive?: boolean;
 
   /* Dynamic inputs */
   @Input() filter?: any[];
@@ -46,30 +45,45 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   @Input() minzoom?: number;
   @Input() maxzoom?: number;
 
+  @Output() click = new EventEmitter<MapMouseEvent>();
+  @Output() mouseEnter = new EventEmitter<MapMouseEvent>();
+  @Output() mouseLeave = new EventEmitter<MapMouseEvent>();
+
+  private layerAdded = false;
+
   constructor(
     private MapService: MapService
   ) { }
 
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.MapService.addLayer({
-        id: this.id,
-        type: this.type,
-        source: this.source,
-        metadata: this.metadata,
-        ref: this.ref,
-        'source-layer': this.sourceLayer,
-        minzoom: this.minzoom,
-        maxzoom: this.maxzoom,
-        interactive: this.interactive,
-        filter: this.filter,
-        layout: this.layout,
-        paint: this.paint
+        layerOptions: {
+          id: this.id,
+          type: this.type,
+          source: this.source,
+          metadata: this.metadata,
+          'source-layer': this.sourceLayer,
+          minzoom: this.minzoom,
+          maxzoom: this.maxzoom,
+          filter: this.filter,
+          layout: this.layout,
+          paint: this.paint
+        },
+        layerEvents: {
+          click: this.click,
+          mouseEnter: this.mouseEnter,
+          mouseLeave: this.mouseLeave
+        }
       }, this.before);
+      this.layerAdded = true;
     });
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.layerAdded) {
+      return;
+    }
     if (changes.paint && !changes.paint.isFirstChange()) {
       this.MapService.setAllLayerPaintProperty(this.id, changes.paint.currentValue!);
     }

src/app/lib/map/map.component.spec.ts

@@ -1,4 +1,4 @@
-import { MapService, SetupOptions } from './map.service';
+import { MapService, SetupMap } from './map.service';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MapComponent } from './map.component';
@@ -43,7 +43,7 @@ describe('MapComponent', () => {
     it('should init with custom inputs', (done: DoneFn) => {
       component.accessToken = 'tokenTest';
       component.style = 'style';
-      msSpy.setup.and.callFake((options: SetupOptions) => {
+      msSpy.setup.and.callFake((options: SetupMap) => {
         expect(options.accessToken).toEqual('tokenTest');
         expect(options.mapOptions.style).toEqual('style');
         done();