feat(gelocate): add geolocation button

src/lib/map/geolocate/geolocate.component.html

@@ -0,0 +1,10 @@
+<div class="igo-geolocate-container">
+  <button
+    md-icon-button
+    [color]="color"
+    (click)="map.geolocate()">
+    <md-icon>
+      my_location
+    </md-icon>
+  </button>
+</div>

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

@@ -0,0 +1,30 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgoSharedModule } from '../../shared';
+
+import { GeolocateComponent } from './geolocate.component';
+
+describe('geolocateComponent', () => {
+  let component: GeolocateComponent;
+  let fixture: ComponentFixture<GeolocateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        IgoSharedModule
+      ],
+      declarations: [ GeolocateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeolocateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/map/geolocate/geolocate.component.styl

@@ -0,0 +1,11 @@
+@require '../../../style/var.styl';
+
+.igo-geolocate-container {
+  width: $igo-icon-size;
+  background-color: #fff;
+}
+
+button,
+:host >>> button .mat-button-ripple-round {
+  border-radius: 0;
+}

src/lib/map/geolocate/geolocate.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+
+import { IgoMap } from '../shared/map';
+
+@Component({
+  selector: 'igo-geolocate',
+  templateUrl: './geolocate.component.html',
+  styleUrls: ['./geolocate.component.styl']
+})
+export class GeolocateComponent {
+
+  @Input()
+  get map(): IgoMap { return this._map; }
+  set map(value: IgoMap) {
+    this._map = value;
+  }
+  private _map: IgoMap;
+
+  @Input()
+  get color(): string { return this._color; }
+  set color(value: string) {
+    this._color = value;
+  }
+  private _color: string;
+
+  constructor() { }
+
+}

src/lib/map/geolocate/index.ts

@@ -0,0 +1 @@
+export * from './geolocate.component';

src/lib/map/shared/map.ts

@@ -112,15 +112,14 @@ export class IgoMap {
     const view = new ol.View(options);
     this.ol.setView(view);
 
-    this.unsubscribeGeolocation();
-    this.stopGeolocation();
+    this.unsubscribeGeolocate();
     if (options) {
       if (options.center) {
         const center = ol.proj.fromLonLat(options.center, this.projection);
         view.setCenter(center);
       }
       if (options.geolocate) {
-        this.subscribeGeolocation();
+        this.geolocate(true);
       }
     }
   }
@@ -262,38 +261,12 @@ export class IgoMap {
     this.overlayDataSource.ol.clear();
   }
 
-  startGeolocation() {
-    if (!this.geolocation) {
-      this.geolocation = new ol.Geolocation({
-        projection: this.projection,
-        tracking: true
-      });
-
-      this.geolocation.on('change', (evt) => {
-        this.geolocation$.next(this.geolocation);
-      });
-    } else {
-      this.geolocation.setTracking(true);
-    }
-  }
-
-  stopGeolocation() {
-    if (this.geolocation) {
-      this.geolocation.setTracking(false);
-    }
-  }
-
-  private sortLayers() {
-    // Sort by descending zIndex
-    this.layers.sort((layer1, layer2) => layer2.zIndex - layer1.zIndex);
-  }
-
-  private getLayerIndex(layer: Layer) {
-    return this.layers.findIndex(layer_ => layer_ === layer);
-  }
-
-  private subscribeGeolocation() {
+  geolocate(track = false) {
     let first = true;
+    if (this.geolocation$$) {
+      track = this.geolocation.getTracking();
+      this.unsubscribeGeolocate()
+    }
     this.startGeolocation();
 
     this.geolocation$$ = this.geolocation$.subscribe((geolocation) => {
@@ -316,15 +289,47 @@ export class IgoMap {
         view.setCenter(coordinates);
         view.setZoom(14);
       }
-
-      first = false;
+      if (track) {
+        this.unsubscribeGeolocate();
+      }
     });
   }
 
-  private unsubscribeGeolocation() {
+  unsubscribeGeolocate() {
     this.stopGeolocation();
     if (this.geolocation$$) {
       this.geolocation$$.unsubscribe();
+      this.geolocation$$ = undefined;
+    }
+  }
+
+  private startGeolocation() {
+    if (!this.geolocation) {
+      this.geolocation = new ol.Geolocation({
+        projection: this.projection,
+        tracking: true
+      });
+
+      this.geolocation.on('change', (evt) => {
+        this.geolocation$.next(this.geolocation);
+      });
+    } else {
+      this.geolocation.setTracking(true);
+    }
+  }
+
+ private stopGeolocation() {
+    if (this.geolocation) {
+      this.geolocation.setTracking(false);
     }
   }
+
+  private sortLayers() {
+    // Sort by descending zIndex
+    this.layers.sort((layer1, layer2) => layer2.zIndex - layer1.zIndex);
+  }
+
+  private getLayerIndex(layer: Layer) {
+    return this.layers.findIndex(layer_ => layer_ === layer);
+  }
 }