feat(map): add onMoveStart event

Author: remiHau

documentation/README.md

@@ -33,6 +33,7 @@ Exposed events are:
 
 - `onClick` (`ol.MapBrowserEvent`) - A click with no dragging. A double click will fire two of this.
 - `onDblClick` (`ol.MapBrowserEvent`) - A true double click, with no dragging.
+- `onMoveStart` (`ol.MapEvent`) - Triggered when the map start been moved.
 - `onMoveEnd` (`ol.MapEvent`) - Triggered after the map is moved.
 - `onPointerDrag` (`ol.MapBrowserEvent`) experimental - Triggered when a pointer is dragged.
 - `onPointerMove` (`ol.MapBrowserEvent`) - Triggered when a pointer is moved. Note that on touch devices this is triggered when the map is panned, so is not the same as mousemove.

projects/ngx-openlayers/src/lib/map.component.ts

@@ -50,6 +50,8 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
   @Output()
   onDblClick: EventEmitter<MapBrowserEvent>;
   @Output()
+  onMoveStart: EventEmitter<MapEvent>;
+  @Output()
   onMoveEnd: EventEmitter<MapEvent>;
   @Output()
   onPointerDrag: EventEmitter<MapBrowserEvent>;
@@ -73,6 +75,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
   constructor(private host: ElementRef) {
     this.onClick = new EventEmitter<MapBrowserEvent>();
     this.onDblClick = new EventEmitter<MapBrowserEvent>();
+    this.onMoveStart = new EventEmitter<MapEvent>();
     this.onMoveEnd = new EventEmitter<MapEvent>();
     this.onPointerDrag = new EventEmitter<MapBrowserEvent>();
     this.onPointerMove = new EventEmitter<MapBrowserEvent>();
@@ -89,6 +92,7 @@ export class MapComponent implements OnInit, AfterViewInit, OnChanges {
     this.instance.setTarget(this.host.nativeElement.firstElementChild);
     this.instance.on('click', (event: MapBrowserEvent) => this.onClick.emit(event));
     this.instance.on('dblclick', (event: MapBrowserEvent) => this.onDblClick.emit(event));
+    this.instance.on('movestart', (event: MapEvent) => this.onMoveStart.emit(event));
     this.instance.on('moveend', (event: MapEvent) => this.onMoveEnd.emit(event));
     this.instance.on('pointerdrag', (event: MapBrowserEvent) => this.onPointerDrag.emit(event));
     this.instance.on('pointermove', (event: MapBrowserEvent) => this.onPointerMove.emit(event));

src/app/map-position/map-position.component.ts

@@ -7,7 +7,7 @@ import Projection from 'ol/proj/Projection';
 @Component({
   selector: 'app-map-position',
   template: `
-    <aol-map #map width="100%" height="100%" (onMoveEnd)="displayCoordinates()">
+    <aol-map #map width="100%" height="100%" (onMoveStart)="startMoving()" (onMoveEnd)="displayCoordinates()">
       <aol-interaction-default></aol-interaction-default>
       <aol-control-defaults></aol-control-defaults>
 
@@ -21,8 +21,9 @@ import Projection from 'ol/proj/Projection';
     <div class="info">
       <div class="current-coordinates">
         <h3>Map coordinates</h3>
-        <span>Longitude: {{ currentLon }}</span> <span>Latitude: {{ currentLat }}</span>
-        <span>Zoom: {{ currentZoom }}</span>
+        <span>Longitude: {{ moving ? '----' : currentLon }}</span>
+        <span>Latitude: {{ moving ? '----' : currentLat }}</span>
+        <span>Zoom: {{ moving ? '----' : currentZoom }}</span>
       </div>
       <div class="update-coordinates">
         <h3>Update coordinates</h3>
@@ -88,6 +89,7 @@ export class MapPositionComponent implements OnInit {
   displayProj = new Projection({ code: 'EPSG:3857' });
   inputProj = new Projection({ code: 'EPSG:4326' });
 
+  moving = false;
   currentZoom = 0;
   currentLon = 0;
   currentLat = 0;
@@ -103,7 +105,12 @@ export class MapPositionComponent implements OnInit {
   }
 
   displayCoordinates(): void {
+    this.moving = false;
     this.currentZoom = this.view.instance.getZoom();
     [this.currentLon, this.currentLat] = transform(this.view.instance.getCenter(), this.displayProj, this.inputProj);
   }
+
+  startMoving(): void {
+    this.moving = true;
+  }
 }