Skip to content

Commit f45d965

Browse files
author
Wykks
committed
feat: update support to mapbox-gl 0.49
1 parent b4719f5 commit f45d965

19 files changed

+77
-65
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ Include the following components:
3333
## How to start
3434

3535
```
36-
npm install ngx-mapbox-gl mapbox-gl@0.48.0 --save
36+
npm install ngx-mapbox-gl mapbox-gl@0.49.0 --save
3737
```
3838
If using typescript add mapbox-gl types
3939
```
40-
npm install @types/mapbox-gl@0.48.0 --save-dev
40+
npm install @types/mapbox-gl@0.49.0 --save-dev
4141
```
4242

4343
Load the css of mapbox-gl (and mapbox-gl-geocoder if mglGeocoder is used)

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@turf/random": "^6.0.2",
3939
"hammerjs": "^2.0.8",
4040
"lodash-es": "^4.17.11",
41-
"mapbox-gl": "0.48.0",
41+
"mapbox-gl": "0.49.0",
4242
"ngx-md": "^6.0.9",
4343
"rxjs": "^6.3.3",
4444
"scroll-into-view-if-needed": "^2.2.19",
@@ -54,7 +54,7 @@
5454
"@types/jasmine": "^2.8.9",
5555
"@types/jasminewd2": "^2.0.5",
5656
"@types/lodash-es": "^4.17.1",
57-
"@types/mapbox-gl": "^0.48.0",
57+
"@types/mapbox-gl": "^0.49.0",
5858
"@types/node": "^10.11.6",
5959
"@types/supercluster": "^3.0.2",
6060
"codelyzer": "^4.5.0",

‎projects/ngx-mapbox-gl/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"peerDependencies": {
2323
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
2424
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
25-
"mapbox-gl": "0.48.0",
25+
"mapbox-gl": "0.49.0",
2626
"rxjs": "^6.0.0"
2727
},
2828
"dependencies": {

‎projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export class DraggableDirective implements OnInit, OnDestroy {
7373
let moving = false;
7474
let inside = false;
7575
this.MapService.mapCreated$.subscribe(() => {
76-
const mouseUp$ = fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mouseup');
76+
const mouseUp$ = fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mouseup');
7777
const dragStart$ = enter$.pipe(
7878
takeUntil(this.destroyed$),
7979
filter(() => !moving),
@@ -84,12 +84,12 @@ export class DraggableDirective implements OnInit, OnDestroy {
8484
this.MapService.updateDragPan(false);
8585
}),
8686
switchMap(() =>
87-
fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mousedown')
87+
fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mousedown')
8888
.pipe(takeUntil(leave$))
8989
)
9090
);
9191
const dragging$ = dragStart$.pipe(
92-
switchMap(() => fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mousemove')
92+
switchMap(() => fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mousemove')
9393
.pipe(takeUntil(mouseUp$))
9494
)
9595
);

‎projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
7171
ngOnInit() {
7272
this.MapService.mapLoaded$.subscribe(() => {
7373
this.init(true);
74-
this.sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
74+
this.sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
7575
filter(() => !this.MapService.mapInstance.getLayer(this.id))
7676
).subscribe(() => {
7777
this.init(false);

‎projects/ngx-mapbox-gl/src/lib/map/map.component.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import {
22
AnimationOptions,
33
EventData,
4+
FitBoundsOptions,
45
LngLatBoundsLike,
56
LngLatLike,
67
Map,
78
MapBoxZoomEvent,
89
MapMouseEvent,
910
MapTouchEvent,
10-
PaddingOptions,
1111
PointLike,
1212
Style
13-
} from 'mapbox-gl';
13+
} from 'mapbox-gl';
1414
import { MapService, MovingOptions } from './map.service';
1515
import { MapEvent } from './map.types';
1616
import {
@@ -96,13 +96,8 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
9696
@Input() movingMethod: 'jumpTo' | 'easeTo' | 'flyTo' = 'flyTo';
9797
@Input() movingOptions?: MovingOptions;
9898
@Input() fitBounds?: LngLatBoundsLike;
99-
@Input() fitBoundsOptions?: {
100-
linear?: boolean,
101-
easing?: Function,
102-
padding?: number | PaddingOptions,
103-
offset?: PointLike,
104-
maxZoom?: number
105-
};
99+
@Input() fitBoundsOptions?: FitBoundsOptions;
100+
@Input() fitScreenCoordinates?: [PointLike, PointLike];
106101
@Input() centerWithPanTo?: boolean;
107102
@Input() panToOptions?: AnimationOptions;
108103
@Input() cursorStyle?: string;
@@ -253,6 +248,13 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
253248
if (changes.fitBounds && !changes.fitBounds.isFirstChange()) {
254249
this.MapService.fitBounds(changes.fitBounds.currentValue, this.fitBoundsOptions);
255250
}
251+
if (changes.fitScreenCoordinates && !changes.fitBounds.isFirstChange()) {
252+
this.MapService.fitScreenCoordinates(
253+
changes.fitScreenCoordinates.currentValue,
254+
this.bearing ? this.bearing[0] : 0,
255+
this.movingOptions
256+
);
257+
}
256258
if (
257259
this.centerWithPanTo &&
258260
changes.center && !changes.center.isFirstChange() &&
@@ -262,7 +264,7 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
262264
} else if (
263265
changes.center && !changes.center.isFirstChange() ||
264266
changes.zoom && !changes.zoom.isFirstChange() ||
265-
changes.bearing && !changes.bearing.isFirstChange() ||
267+
(changes.bearing && !changes.bearing.isFirstChange() && !changes.fitScreenCoordinates) ||
266268
changes.pitch && !changes.pitch.isFirstChange()
267269
) {
268270
this.MapService.move(

‎projects/ngx-mapbox-gl/src/lib/map/map.service.ts‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -167,14 +167,12 @@ export class MapService {
167167
}
168168

169169
updateStyle(style: MapboxGl.Style) {
170-
// TODO Probably not so simple, write demo/tests
171170
return this.zone.runOutsideAngular(() => {
172171
this.mapInstance.setStyle(style);
173172
});
174173
}
175174

176175
updateMaxBounds(maxBounds: MapboxGl.LngLatBoundsLike) {
177-
// TODO Probably not so simple, write demo/tests
178176
return this.zone.runOutsideAngular(() => {
179177
this.mapInstance.setMaxBounds(maxBounds);
180178
});
@@ -186,7 +184,7 @@ export class MapService {
186184
}
187185

188186
queryRenderedFeatures(
189-
pointOrBox?: MapboxGl.PointLike | MapboxGl.PointLike[],
187+
pointOrBox?: MapboxGl.PointLike | [MapboxGl.PointLike, MapboxGl.PointLike],
190188
parameters?: { layers?: string[], filter?: any[] }
191189
): GeoJSON.Feature<GeoJSON.GeometryObject>[] {
192190
return this.mapInstance.queryRenderedFeatures(pointOrBox, parameters);
@@ -289,10 +287,10 @@ export class MapService {
289287
this.zone.run(() => marker.markersEvents.dragEnd.emit(event.target))
290288
);
291289
}
292-
markerInstance.setLngLat(marker.markersOptions.feature ?
293-
marker.markersOptions.feature.geometry!.coordinates :
294-
marker.markersOptions.lngLat!
295-
);
290+
const lngLat: MapboxGl.LngLatLike = marker.markersOptions.feature ?
291+
<[number, number]>marker.markersOptions.feature.geometry!.coordinates :
292+
marker.markersOptions.lngLat!;
293+
markerInstance.setLngLat(lngLat);
296294
return this.zone.runOutsideAngular(() => {
297295
markerInstance.addTo(this.mapInstance);
298296
return markerInstance;
@@ -465,12 +463,22 @@ export class MapService {
465463
});
466464
}
467465

468-
fitBounds(bounds: MapboxGl.LngLatBoundsLike, options?: any) {
466+
fitBounds(bounds: MapboxGl.LngLatBoundsLike, options?: MapboxGl.FitBoundsOptions) {
469467
return this.zone.runOutsideAngular(() => {
470468
this.mapInstance.fitBounds(bounds, options);
471469
});
472470
}
473471

472+
fitScreenCoordinates(
473+
points: [MapboxGl.PointLike, MapboxGl.PointLike],
474+
bearing: number,
475+
options?: MapboxGl.AnimationOptions & MapboxGl.CameraOptions
476+
) {
477+
return this.zone.runOutsideAngular(() => {
478+
this.mapInstance.fitScreenCoordinates(points[0], points[1], bearing, options);
479+
});
480+
}
481+
474482
getCurrentViewportBbox(): BBox {
475483
const canvas = this.mapInstance.getCanvas();
476484
const w = parseInt(canvas.style.width!, 10);
@@ -515,10 +523,6 @@ export class MapService {
515523

516524
private removeLayers() {
517525
for (const layerId of this.layerIdsToRemove) {
518-
this.mapInstance.off('click', layerId);
519-
this.mapInstance.off('mouseenter', layerId);
520-
this.mapInstance.off('mouseleave', layerId);
521-
this.mapInstance.off('mousemove', layerId);
522526
this.mapInstance.removeLayer(layerId);
523527
}
524528
this.layerIdsToRemove = [];

‎projects/ngx-mapbox-gl/src/lib/marker-cluster/marker-cluster.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
118118
ngAfterContentInit() {
119119
this.MapService.mapCreated$.subscribe(() => {
120120
const mapMove$ = merge(
121-
fromEvent(this.MapService.mapInstance, 'zoomChange'),
122-
fromEvent(this.MapService.mapInstance, 'move')
121+
fromEvent(<any>this.MapService.mapInstance, 'zoomChange'),
122+
fromEvent(<any>this.MapService.mapInstance, 'move')
123123
);
124124
const sub = mapMove$.pipe(
125125
startWith<any>(undefined)

‎projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
6060
this.markerInstance!.setLngLat(this.lngLat!);
6161
}
6262
if (changes.feature && !changes.feature.isFirstChange()) {
63-
this.markerInstance!.setLngLat(this.feature!.geometry!.coordinates);
63+
this.markerInstance!.setLngLat(<[number, number]>this.feature!.geometry!.coordinates);
6464
}
6565
if (changes.draggable && !changes.draggable.isFirstChange()) {
6666
this.markerInstance!.setDraggable(!!this.draggable);
@@ -96,7 +96,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
9696
this.markerInstance!.togglePopup();
9797
}
9898

99-
updateCoordinates(coordinates: number[]) {
99+
updateCoordinates(coordinates: [number, number]) {
100100
this.markerInstance!.setLngLat(coordinates);
101101
}
102102
}

‎projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
5555
changes.lngLat && !changes.lngLat.isFirstChange() ||
5656
changes.feature && !changes.feature.isFirstChange()
5757
) {
58-
const newlngLat = changes.lngLat ? this.lngLat! : this.feature!.geometry!.coordinates!;
58+
const newlngLat = changes.lngLat ? this.lngLat! : <[number, number]>this.feature!.geometry!.coordinates!;
5959
this.MapService.removePopupFromMap(this.popupInstance!, true);
6060
const popupInstanceTmp = this.createPopup();
6161
this.MapService.addPopupToMap(popupInstanceTmp, newlngLat, this.popupInstance!.isOpen());
@@ -106,7 +106,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
106106
private addPopup(popup: Popup) {
107107
this.MapService.mapCreated$.subscribe(() => {
108108
if (this.lngLat || this.feature) {
109-
this.MapService.addPopupToMap(popup, this.lngLat ? this.lngLat : this.feature!.geometry!.coordinates!);
109+
this.MapService.addPopupToMap(popup, this.lngLat ? this.lngLat : <[number, number]>this.feature!.geometry!.coordinates!);
110110
} else if (this.marker && this.marker.markerInstance) {
111111
this.MapService.addPopupToMarker(this.marker.markerInstance, popup);
112112
} else {

0 commit comments

Comments
 (0)