feat(layer): add mouseMove event

+ add hover-styles example

e2e/runtime-check.e2e-spec.ts

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

src/app/demo/examples/hover-styles.component.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `
+  <mgl-map
+    style="mapbox://styles/mapbox/streets-v9"
+    [zoom]="2"
+    [center]="[-100.486052, 37.830348]"
+  >
+    <mgl-geojson-source
+      id="states"
+      data="https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces.geojson"
+    >
+    </mgl-geojson-source>
+    <mgl-layer
+      id="state-fills"
+      type="fill"
+      source="states"
+      [paint]="{
+        'fill-color': '#627BC1',
+        'fill-opacity': 0.5
+      }"
+      (mouseMove)="activateHoverOn($event)"
+      (mouseLeave)="disableHover()"
+    >
+    </mgl-layer>
+    <mgl-layer
+      id="state-borders"
+      type="line"
+      source="states"
+      [paint]="{
+        'line-color': '#627BC1',
+        'line-width': 2
+      }"
+    >
+    </mgl-layer>
+    <mgl-layer
+      id="state-fills-hover"
+      type="fill"
+      source="states"
+      [paint]="{
+        'fill-color': '#627BC1',
+        'fill-opacity': 1
+      }"
+      [filter]="hoverFilter"
+    >
+    </mgl-layer>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css']
+})
+export class HoverStylesComponent {
+  hoverFilter = ['==', 'name', ''];
+
+  activateHoverOn(evt: any) {
+    this.hoverFilter = ['==', 'name', evt.features[0].properties.name];
+  }
+
+  disableHover() {
+    this.hoverFilter = ['==', 'name', ''];
+  }
+}

src/app/demo/module.ts

@@ -1,38 +1,39 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButtonToggleModule, MatRadioModule, MatButtonModule } from '@angular/material';
+import { MatButtonModule, MatButtonToggleModule, MatRadioModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 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';
+import { CenterOnSymbolComponent } from './examples/center-on-symbol.component';
 import { ClusterComponent } from './examples/cluster.component';
 import { CustomMarkerIconsComponent } from './examples/custom-marker-icons.component';
 import { CustomStyleIdComponent } from './examples/custom-style-id.component';
 import { DisplayMapComponent } from './examples/display-map.component';
 import { FullscreenComponent } from './examples/fullscreen.component';
 import { GeoJSONLineComponent } from './examples/geojson-line.component';
 import { HeatMapComponent } from './examples/heatmap.component';
+import { HoverStylesComponent } from './examples/hover-styles.component';
+import { InteractiveFalseComponent } from './examples/interactive-false.component';
+import { LanguageSwitchComponent } from './examples/language-switch.component';
 import { LiveUpdateFeatureComponent } from './examples/live-update-feature.component';
+import { LocateUserComponent } from './examples/locate-user.component';
 import { NavigationComponent } from './examples/navigation.component';
+import { NgxAttributionComponent } from './examples/ngx-attribution.component';
+import { NgxCustomControlComponent } from './examples/ngx-custom-control.component';
 import { NgxCustomMarkerIconsComponent } from './examples/ngx-custom-marker-icons.component';
+import { NgxDragAPointComponent } from './examples/ngx-drag-a-point.component';
 import { NgxGeoJSONLineComponent } from './examples/ngx-geojson-line.component';
+import { NgxScaleControlComponent } from './examples/ngx-scale-control.component';
 import { PopupComponent } from './examples/popup.component';
 import { SatelliteMapComponent } from './examples/satellite-map.component';
 import { SetStyleComponent } from './examples/set-style.component';
 import { ToggleLayersComponent } from './examples/toggle-layers.component';
 import { IndexComponent } from './index.component';
 import { LayoutComponent } from './layout/layout.component';
-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.component';
-import { LanguageSwitchComponent } from './examples/language-switch.component';
-import { CenterOnSymbolComponent } from './examples/center-on-symbol.component';
-import { NgxDragAPointComponent } from './examples/ngx-drag-a-point.component';
 
 export const demoRoutes: Routes = [
   { path: '', component: IndexComponent },
@@ -62,6 +63,7 @@ export const demoRoutes: Routes = [
   { path: 'language-switch', component: LanguageSwitchComponent },
   { path: 'center-on-symbol', component: CenterOnSymbolComponent },
   { path: 'ngx-drag-a-point', component: NgxDragAPointComponent },
+  { path: 'hover-styles', component: HoverStylesComponent },
 ];
 
 @NgModule({
@@ -105,7 +107,8 @@ export const demoRoutes: Routes = [
     InteractiveFalseComponent,
     LanguageSwitchComponent,
     CenterOnSymbolComponent,
-    NgxDragAPointComponent
+    NgxDragAPointComponent,
+    HoverStylesComponent
   ]
 })
 export class DemoModule { }

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

@@ -58,6 +58,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   @Output() click = new EventEmitter<MapMouseEvent>();
   @Output() mouseEnter = new EventEmitter<MapMouseEvent>();
   @Output() mouseLeave = new EventEmitter<MapMouseEvent>();
+  @Output() mouseMove = new EventEmitter<MapMouseEvent>();
 
   private layerAdded = false;
 
@@ -83,7 +84,8 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
         layerEvents: {
           click: this.click,
           mouseEnter: this.mouseEnter,
-          mouseLeave: this.mouseLeave
+          mouseLeave: this.mouseLeave,
+          mouseMove: this.mouseMove
         }
       }, this.before);
       this.layerAdded = true;

src/app/lib/map/map.service.ts

@@ -19,6 +19,7 @@ export interface SetupLayer {
     click: EventEmitter<MapboxGl.MapMouseEvent>;
     mouseEnter: EventEmitter<MapboxGl.MapMouseEvent>;
     mouseLeave: EventEmitter<MapboxGl.MapMouseEvent>;
+    mouseMove: EventEmitter<MapboxGl.MapMouseEvent>;
   };
 }
 
@@ -189,6 +190,11 @@ export class MapService {
           layer.layerEvents.mouseLeave.emit(evt);
         });
       });
+      this.mapInstance.on('mousemove', layer.layerOptions.id, (evt: MapboxGl.MapMouseEvent) => {
+        this.zone.run(() => {
+          layer.layerEvents.mouseMove.emit(evt);
+        });
+      });
     });
   }
 
@@ -198,6 +204,7 @@ export class MapService {
       this.mapInstance.off('click', layerId);
       this.mapInstance.off('mouseenter', layerId);
       this.mapInstance.off('mouseleave', layerId);
+      this.mapInstance.off('mousemove', layerId);
       this.mapInstance.removeLayer(layerId);
     });
   }