fix(map): implement fitBounds

Also add a demo for fitBounds

Author: Wykks

e2e/zoomto-linestring.e2e-spec.ts

@@ -0,0 +1,32 @@
+import { browser, element, by, ExpectedConditions as EC } from 'protractor';
+const PixelDiff = require('pixel-diff');
+const browserLogs = require('protractor-browser-logs');
+
+describe('Zoomto Linestring', () => {
+  let logs: any;
+
+  beforeEach(() => {
+    logs = browserLogs(browser);
+  });
+
+  afterEach(() => {
+    return logs.verify();
+  });
+
+  it('should zoom to linestring', async () => {
+    await browser.get('/zoomto-linestring');
+    const elm = element(by.tagName('canvas'));
+    await browser.wait(EC.presenceOf(elm), 2000);
+    const buttons = element.all(by.tagName('button'));
+    await browser.sleep(4000);
+    const screen1 = await browser.takeScreenshot();
+    await buttons.get(0).click();
+    await browser.sleep(4000);
+    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);
+  });
+});

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

@@ -5,31 +5,40 @@ import { Map } from 'mapbox-gl';
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/light-v9"
-    [zoom]="2.9"
+    [zoom]="[2.9]"
     [center]="[16.05, 48]"
     (load)="map = $event"
   >
     <mgl-control>
       <button
         mat-raised-button
         (click)="changeLangTo('fr')"
-      >French</button>
+      >
+        French
+      </button>
       <button
         mat-raised-button
         (click)="changeLangTo('ru')"
-      >Russian</button>
+      >
+        Russian
+      </button>
       <button
         mat-raised-button
         (click)="changeLangTo('de')"
-      >German</button>
+      >
+        German
+      </button>
       <button
         mat-raised-button
         (click)="changeLangTo('es')"
-      >Spanish</button>
+      >
+        Spanish
+      </button>
     </mgl-control>
   </mgl-map>
   `,
-  styleUrls: ['./examples.css', './toggle-layers.component.css']
+  styleUrls: ['./examples.css'],
+  preserveWhitespaces: false
 })
 export class LanguageSwitchComponent {
   map: Map;

src/app/demo/examples/zoomto-linestring.component.ts

@@ -0,0 +1,78 @@
+import { Component } from '@angular/core';
+import { LngLatBounds } from 'mapbox-gl';
+
+@Component({
+  template: `
+  <mgl-map
+    style="mapbox://styles/mapbox/light-v9"
+    [zoom]="[12]"
+    [center]="[-77.0214, 38.8970]"
+    [fitBounds]="bounds"
+    [fitBoundsOptions]="{
+      padding: 20
+    }"
+  >
+    <mgl-control>
+      <button
+        mat-raised-button
+        (click)="zoomToBounds()"
+      >
+        Zoom to bounds
+      </button>
+    </mgl-control>
+    <mgl-layer
+      id="LineString"
+      type="line"
+      [source]="source"
+      [paint]="{
+        'line-color': '#BF93E4',
+        'line-width': 5
+      }"
+      [layout]="{
+        'line-join': 'round',
+        'line-cap': 'round'
+      }"
+    ></mgl-layer>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css'],
+  preserveWhitespaces: false
+})
+export class ZoomtoLinestringComponent {
+  bounds: LngLatBounds;
+
+  source = {
+    type: 'geojson',
+    data: {
+      'type': 'FeatureCollection',
+      'features': [{
+        'type': 'Feature',
+        'geometry': {
+          'type': 'LineString',
+          'properties': {},
+          'coordinates': [
+            [-77.0366048812866, 38.89873175227713],
+            [-77.03364372253417, 38.89876515143842],
+            [-77.03364372253417, 38.89549195896866],
+            [-77.02982425689697, 38.89549195896866],
+            [-77.02400922775269, 38.89387200688839],
+            [-77.01519012451172, 38.891416957534204],
+            [-77.01521158218382, 38.892068305429156],
+            [-77.00813055038452, 38.892051604275686],
+            [-77.00832366943358, 38.89143365883688],
+            [-77.00818419456482, 38.89082405874451],
+            [-77.00815200805664, 38.88989712255097]
+          ]
+        }
+      }]
+    }
+  };
+
+  zoomToBounds() {
+    const coordinates = this.source.data.features[0].geometry.coordinates;
+
+    this.bounds = coordinates.reduce((bounds, coord) => {
+        return bounds.extend(<any>coord);
+    }, new LngLatBounds(coordinates[0], coordinates[0]));
+  }
+}

src/app/demo/module.ts

@@ -33,6 +33,7 @@ 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 { ZoomtoLinestringComponent } from './examples/zoomto-linestring.component';
 import { IndexComponent } from './index.component';
 import { LayoutComponent } from './layout/layout.component';
 
@@ -78,7 +79,8 @@ export const demoRoutes: Routes = [
       { path: 'center-on-symbol', component: CenterOnSymbolComponent, data: { label: 'Center the map on a clicked symbol', cat: Category.USER_INTERACTION } },
       { path: 'ngx-drag-a-point', component: NgxDragAPointComponent, data: { label: '[NGX] Create a draggable point', cat: Category.USER_INTERACTION } },
       { path: 'hover-styles', component: HoverStylesComponent, data: { label: 'Create a hover effect', cat: Category.USER_INTERACTION } },
-      { path: 'popup-on-click', component: PopupOnClickComponent, data: { label: 'Display a popup on click', cat: Category.CONTROLS_AND_OVERLAYS } }
+      { path: 'popup-on-click', component: PopupOnClickComponent, data: { label: 'Display a popup on click', cat: Category.CONTROLS_AND_OVERLAYS } },
+      { path: 'zoomto-linestring', component: ZoomtoLinestringComponent, data: { label: 'Fit to the bounds of a LineString', cat: Category.USER_INTERACTION } },
     ]
   }
 ];
@@ -128,7 +130,8 @@ export const demoRoutes: Routes = [
     CenterOnSymbolComponent,
     NgxDragAPointComponent,
     HoverStylesComponent,
-    PopupOnClickComponent
+    PopupOnClickComponent,
+    ZoomtoLinestringComponent
   ]
 })
 export class DemoModule { }

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

@@ -96,7 +96,8 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
     linear?: boolean,
     easing?: Function,
     padding?: number | PaddingOptions,
-    offset?: PointLike, maxZoom?: number
+    offset?: PointLike,
+    maxZoom?: number
   };
   @Input() flyToOptions?: FlyToOptions;
   @Input() centerWithPanTo?: boolean;
@@ -243,6 +244,9 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
     if (changes.maxBounds && !changes.maxBounds.isFirstChange()) {
       this.MapService.updateMaxBounds(changes.maxBounds.currentValue);
     }
+    if (changes.fitBounds && !changes.fitBounds.isFirstChange()) {
+      this.MapService.fitBounds(changes.fitBounds.currentValue, this.fitBoundsOptions);
+    }
     if (
       this.centerWithPanTo &&
       changes.center && !changes.center.isFirstChange() &&
@@ -265,5 +269,4 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
       );
     }
   }
-
 }

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

@@ -350,6 +350,12 @@ export class MapService {
     });
   }
 
+  fitBounds(bounds: MapboxGl.LngLatBoundsLike, options?: any) {
+    return this.zone.runOutsideAngular(() => {
+      this.mapInstance.fitBounds(bounds, options);
+    });
+  }
+
   private createMap(options: MapboxGl.MapboxOptions) {
     Object.keys(options)
       .forEach((key: string) => {