Skip to content

Commit

Permalink
fix(map): implement fitBounds
Browse files Browse the repository at this point in the history
Also add a demo for fitBounds
  • Loading branch information
Wykks committed Dec 18, 2017
1 parent 8812e6c commit 0234881
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 10 deletions.
32 changes: 32 additions & 0 deletions e2e/zoomto-linestring.e2e-spec.ts
Original file line number Diff line number Diff line change
@@ -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);
});
});
21 changes: 15 additions & 6 deletions src/app/demo/examples/language-switch.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
78 changes: 78 additions & 0 deletions src/app/demo/examples/zoomto-linestring.component.ts
Original file line number Diff line number Diff line change
@@ -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]));
}
}
7 changes: 5 additions & 2 deletions src/app/demo/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 } },
]
}
];
Expand Down Expand Up @@ -128,7 +130,8 @@ export const demoRoutes: Routes = [
CenterOnSymbolComponent,
NgxDragAPointComponent,
HoverStylesComponent,
PopupOnClickComponent
PopupOnClickComponent,
ZoomtoLinestringComponent
]
})
export class DemoModule { }
7 changes: 5 additions & 2 deletions src/app/lib/map/map.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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() &&
Expand All @@ -265,5 +269,4 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
);
}
}

}
6 changes: 6 additions & 0 deletions src/app/lib/map/map.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down

0 comments on commit 0234881

Please sign in to comment.