Skip to content

Commit

Permalink
feat: update to mapbox-gl 1.12.0 (#253)
Browse files Browse the repository at this point in the history
  • Loading branch information
AnthonyMacKinnon authored Dec 8, 2020
1 parent e49ae6e commit eddbda7
Show file tree
Hide file tree
Showing 18 changed files with 694 additions and 429 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Include the following components:
- [mgl-geojson-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-geojson-source-mapbox-gl-style-spec)
- [mgl-canvas-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-canvas-source-mapbox-gl-style-spec)
- [mgl-image-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-image-source-mapbox-gl-style-spec)
- [mgl-raster-dem-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-raster-dem-source-mapbox-gl-style-spec)
- [mgl-raster-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-raster-source-mapbox-gl-style-spec)
- [mgl-vector-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-vector-source-mapbox-gl-style-spec)
- [mgl-video-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-video-source-mapbox-gl-style-spec)
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"@ngrx/store-devtools": "^9.2.0",
"@stackblitz/sdk": "^1.3.0",
"lodash-es": "^4.17.11",
"mapbox-gl": "^1.1.0",
"mapbox-gl": "^1.12.0",
"ngx-md": "^8.0.0",
"rxjs": "^6.5.2",
"scroll-into-view-if-needed": "^2.2.20",
Expand All @@ -69,7 +69,7 @@
"@types/jasmine": "^3.3.13",
"@types/jasminewd2": "^2.0.6",
"@types/lodash-es": "^4.17.3",
"@types/mapbox-gl": "^1.5.2",
"@types/mapbox-gl": "^1.12.5",
"angular-cli-ghpages": "^0.6.0",
"codelyzer": "^6.0.0",
"commitizen": "^4.0.3",
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-mapbox-gl/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"peerDependencies": {
"@angular/common": ">= 8.0.0 < 11.0.0",
"@angular/core": ">= 8.0.0 < 11.0.0",
"mapbox-gl": "^1.1.0",
"mapbox-gl": "^1.12.0",
"rxjs": "^6.5.0"
},
"dependencies": {
Expand Down
92 changes: 37 additions & 55 deletions projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts
Original file line number Diff line number Diff line change
@@ -1,70 +1,43 @@
import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
import {
BackgroundLayout,
BackgroundPaint,
CircleLayout,
CirclePaint,
FillExtrusionLayout,
FillExtrusionPaint,
FillLayout,
FillPaint,
GeoJSONSource,
GeoJSONSourceRaw,
ImageSource,
Layer,
LineLayout,
LinePaint,
RasterLayout,
RasterPaint,
RasterSource,
SymbolLayout,
SymbolPaint,
VectorSource,
VideoSource,
MapLayerMouseEvent,
} from 'mapbox-gl';
import { EventData, Layer, MapLayerMouseEvent, MapLayerTouchEvent } from 'mapbox-gl';
import { fromEvent, Subscription } from 'rxjs';
import { filter, mapTo, switchMap, startWith } from 'rxjs/operators';
import { MapService } from '../map/map.service';
import { MapService, SetupLayer } from '../map/map.service';
import { LayerEvents } from '../map/map.types';

@Component({
selector: 'mgl-layer',
template: '',
})
export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, LayerEvents {
/* Init inputs */
@Input() id: string;
@Input() source?: string | VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource | GeoJSONSourceRaw;
@Input() type: 'symbol' | 'fill' | 'line' | 'circle' | 'fill-extrusion' | 'raster' | 'background';
@Input() metadata?: any;
@Input() sourceLayer?: string;
@Input() id: Layer['id'];
@Input() source?: Layer['source'];
@Input() type: Layer['type'];
@Input() metadata?: Layer['metadata'];
@Input() sourceLayer?: Layer['source-layer'];

/* Dynamic inputs */
@Input() filter?: any[];
@Input() layout?:
| BackgroundLayout
| FillLayout
| FillExtrusionLayout
| LineLayout
| SymbolLayout
| RasterLayout
| CircleLayout;
@Input() paint?:
| BackgroundPaint
| FillPaint
| FillExtrusionPaint
| LinePaint
| SymbolPaint
| RasterPaint
| CirclePaint;
@Input() filter?: Layer['filter'];
@Input() layout?: Layer['layout'];
@Input() paint?: Layer['paint'];
@Input() before?: string;
@Input() minzoom?: number;
@Input() maxzoom?: number;
@Input() minzoom?: Layer['minzoom'];
@Input() maxzoom?: Layer['maxzoom'];

@Output() click = new EventEmitter<MapLayerMouseEvent>();
@Output() mouseEnter = new EventEmitter<MapLayerMouseEvent>();
@Output() mouseLeave = new EventEmitter<MapLayerMouseEvent>();
@Output() mouseMove = new EventEmitter<MapLayerMouseEvent>();
@Output() click = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() dblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseEnter = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseLeave = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() mouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() contextMenu = new EventEmitter<MapLayerMouseEvent & EventData>();
@Output() touchStart = new EventEmitter<MapLayerTouchEvent & EventData>();
@Output() touchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
@Output() touchCancel = new EventEmitter<MapLayerTouchEvent & EventData>();

private layerAdded = false;
private sub: Subscription;
Expand Down Expand Up @@ -119,7 +92,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
}

private init(bindEvents: boolean) {
const layer = {
const layer: SetupLayer = {
layerOptions: {
id: this.id,
type: this.type,
Expand All @@ -134,9 +107,18 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
},
layerEvents: {
click: this.click,
dblClick: this.dblClick,
mouseDown: this.mouseDown,
mouseUp: this.mouseUp,
mouseEnter: this.mouseEnter,
mouseLeave: this.mouseLeave,
mouseMove: this.mouseMove,
mouseOver: this.mouseOver,
mouseOut: this.mouseOut,
contextMenu: this.contextMenu,
touchStart: this.touchStart,
touchEnd: this.touchEnd,
touchCancel: this.touchCancel,
},
};
this.MapService.addLayer(layer, bindEvents, this.before);
Expand Down
22 changes: 22 additions & 0 deletions projects/ngx-mapbox-gl/src/lib/map/map.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ describe('MapComponent', () => {
class MapServiceSpy {
setup = jasmine.createSpy('setup');
updateMinZoom = jasmine.createSpy('updateMinZoom');
updateMaxPitch = jasmine.createSpy('updateMaxPitch');
updateMinPitch = jasmine.createSpy('updateMinPitch');
destroyMap = jasmine.createSpy('destroyMap');
mapCreated$ = new ReplaySubject(1);
}
Expand Down Expand Up @@ -62,5 +64,25 @@ describe('MapComponent', () => {
flushMicrotasks();
expect(msSpy.updateMinZoom).toHaveBeenCalledWith(6);
}));

it('should update minpitch', fakeAsync(() => {
msSpy.mapCreated$.complete();
component.minPitch = 15;
component.ngOnChanges({
minPitch: new SimpleChange(null, component.minPitch, false),
});
flushMicrotasks();
expect(msSpy.updateMinPitch).toHaveBeenCalledWith(15);
}));

it('should update maxpitch', fakeAsync(() => {
msSpy.mapCreated$.complete();
component.maxPitch = 25;
component.ngOnChanges({
maxPitch: new SimpleChange(null, component.maxPitch, false),
});
flushMicrotasks();
expect(msSpy.updateMaxPitch).toHaveBeenCalledWith(25);
}));
});
});
Loading

0 comments on commit eddbda7

Please sign in to comment.