Skip to content

Commit bc0203c

Browse files
author
farfromrefug
committed
chore: demo update
1 parent 76d122e commit bc0203c

15 files changed

+727
-5
lines changed

‎demo-ng‎

‎demo-snippets/ng/basic-map/basic-map.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<StackLayout>
77
<ContentView height="100%" width="100%">
88
<Mapbox
9-
accessToken="YOUR_ACCESS_TOKEN"
9+
[accessToken]="MAPBOX_ACCESS_TOKEN"
1010
mapStyle="traffic_day"
1111
latitude="50.467735"
1212
longitude="13.427718"

‎demo-snippets/ng/basic-map/basic-map.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { Component, OnInit } from '@angular/core';
22
import { RouterExtensions } from '@nativescript/angular';
3+
import { MAPBOX_ACCESS_TOKEN } from '../mapbox-token';
34

45
@Component({
56
selector: 'ns-basic-map',
67
templateUrl: './basic-map.component.html'
78
})
89
export class BasicMapComponent implements OnInit {
910
constructor(private router: RouterExtensions) {}
11+
MAPBOX_ACCESS_TOKEN = MAPBOX_ACCESS_TOKEN;
1012

1113
ngOnInit(): void {}
1214

1315
goBack(): void {
1416
this.router.back();
1517
}
1618

17-
onMapReady(args): void {
19+
onMapReady(args: any): void {
1820
console.log('map is ready');
1921
}
2022
}

‎demo-snippets/ng/install.module.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ registerElement('Mapbox', () => require('@nativescript-community/ui-mapbox').Map
55

66
import { BasicMapComponent } from './basic-map/basic-map.component';
77

8-
export const COMPONENTS = [BasicMapComponent];
8+
import { MapboxDemoComponent } from './mapbox-demo/mapbox-demo.component';
9+
import { MapboxDemo2Component } from './mapbox-demo2/mapbox-demo2.component';
10+
import { Trace } from '@nativescript/core';
11+
import { MapboxTraceCategory } from '@nativescript-community/ui-mapbox';
12+
13+
export const COMPONENTS = [BasicMapComponent, MapboxDemoComponent, MapboxDemo2Component];
914
@NgModule({
1015
imports: [],
1116
exports: [],
@@ -15,4 +20,16 @@ export class InstallModule {}
1520

1621
export function installPlugin() {}
1722

18-
export const demos = [{ name: 'Basic Map', path: 'basic-map', component: BasicMapComponent }];
23+
export const demos = [
24+
{ name: 'Basic Map', path: 'basic-map', component: BasicMapComponent },
25+
{ name: 'Demo1', path: 'demo-map', component: MapboxDemoComponent },
26+
{ name: 'Demo2', path: 'demo2-map', component: MapboxDemo2Component }
27+
// {
28+
// path: 'mapbox3',
29+
// loadChildren: () => import('./mapbox-demo3/mapbox-demo3.module').then((m) => m.MapboxDemo3Module)
30+
// }
31+
];
32+
33+
Trace.addCategories(MapboxTraceCategory);
34+
// Trace.addCategories(Trace.categories.Layout);
35+
Trace.enable();

‎demo-snippets/ng/mapbox-demo/mapbox-demo.component.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<ActionBar>
2+
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
3+
<Label text="Basic Map"></Label>
4+
</ActionBar>
5+
6+
<GridLayout rows="auto,*,auto">
7+
<app-mapbox-header row="0" [mapbox]="mapbox"></app-mapbox-header>
8+
<ContentView height="100%" width="100%" row="1">
9+
<Mapbox
10+
[accessToken]="MAPBOX_ACCESS_TOKEN"
11+
mapStyle="traffic_day"
12+
latitude="50.6791408"
13+
longitude="17.8888876"
14+
hideCompass="true"
15+
zoomLevel="18"
16+
showUserLocation="false"
17+
disableZoom="false"
18+
disableRotation="false"
19+
disableScroll="false"
20+
disableTilt="false"
21+
(mapReady)="onMapReady($event)">
22+
</Mapbox>
23+
</ContentView>
24+
25+
<app-mapbox-footer row="2"></app-mapbox-footer>
26+
</GridLayout>

‎demo-snippets/ng/mapbox-demo/mapbox-demo.component.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, NO_ERRORS_SCHEMA, OnDestroy, OnInit, inject } from '@angular/core';
2+
import { ActionBarComponent, NavigationButtonDirective, RouterExtensions, registerElement } from '@nativescript/angular';
3+
import { LatLng, MapboxApi, MapboxTraceCategory, MapboxView, MapboxViewApi } from '@nativescript-community/ui-mapbox';
4+
import { Trace } from '@nativescript/core';
5+
import { MapboxHeaderComponent } from '../mapbox-header/mapbox-header.component';
6+
import { MAPBOX_ACCESS_TOKEN } from '../mapbox-token';
7+
import { MapboxFooterComponent } from '../mapbox-footer/mapbox-footer.component';
8+
9+
registerElement('Mapbox', () => require('@nativescript-community/ui-mapbox').MapboxView);
10+
11+
@Component({
12+
selector: 'app-mapbox-demo',
13+
templateUrl: './mapbox-demo.component.html',
14+
schemas: [NO_ERRORS_SCHEMA],
15+
imports: [ActionBarComponent, NavigationButtonDirective, MapboxHeaderComponent, MapboxFooterComponent]
16+
})
17+
export class MapboxDemoComponent implements OnInit, OnDestroy {
18+
router: RouterExtensions = inject(RouterExtensions);
19+
20+
mapboxView: MapboxView | undefined;
21+
mapbox: MapboxApi | undefined;
22+
23+
MAPBOX_ACCESS_TOKEN = MAPBOX_ACCESS_TOKEN;
24+
25+
ngOnInit() {
26+
console.log('MapboxDemoComponent initialized');
27+
Trace.addCategories(MapboxTraceCategory);
28+
// Trace.enable()
29+
}
30+
31+
goBack(): void {
32+
this.router.back();
33+
}
34+
35+
onMapReady(args: any): void {
36+
console.log('map is ready: ', args.map);
37+
38+
this.mapboxView = args.map;
39+
this.mapbox = this.mapboxView?.getMapboxApi();
40+
41+
console.log('mapboxView map is ready:', this.mapboxView);
42+
}
43+
44+
ngOnDestroy(): void {
45+
if (this.mapbox) {
46+
this.mapbox.destroy();
47+
}
48+
}
49+
}

‎demo-snippets/ng/mapbox-demo2/mapbox-demo2.component.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<ActionBar>
2+
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
3+
<Label text="Basic Map 2"></Label>
4+
</ActionBar>
5+
6+
<GridLayout rows="auto,*,auto" height="100%" width="100%" padding="0">
7+
<app-mapbox-header row="0" [mapbox]="mapbox"></app-mapbox-header>
8+
<ContentView row="1"
9+
width="100%"
10+
height="100%"
11+
id="mapContainer"
12+
#mapContainer>
13+
</ContentView>
14+
<app-mapbox-footer row="2"></app-mapbox-footer>
15+
</GridLayout>

‎demo-snippets/ng/mapbox-demo2/mapbox-demo2.component.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, NO_ERRORS_SCHEMA, NgZone, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
2+
import { ActionBarComponent, NavigationButtonDirective, RouterExtensions, registerElement } from '@nativescript/angular';
3+
import { MapStyle, MapboxApi, MapboxMarker, MapboxTraceCategory, MapboxView } from '@nativescript-community/ui-mapbox';
4+
import { Trace } from '@nativescript/core';
5+
import { MapboxHeaderComponent } from '../mapbox-header/mapbox-header.component';
6+
import { MAPBOX_ACCESS_TOKEN } from '../mapbox-token';
7+
import { MapboxFooterComponent } from '../mapbox-footer/mapbox-footer.component';
8+
9+
registerElement('Mapbox', () => require('@nativescript-community/ui-mapbox').MapboxView);
10+
11+
@Component({
12+
selector: 'app-mapbox-demo2',
13+
templateUrl: './mapbox-demo2.component.html',
14+
schemas: [NO_ERRORS_SCHEMA],
15+
imports: [ActionBarComponent, NavigationButtonDirective, MapboxHeaderComponent, MapboxFooterComponent]
16+
})
17+
export class MapboxDemo2Component implements OnInit, AfterViewInit, OnDestroy {
18+
router: RouterExtensions = inject(RouterExtensions);
19+
cd: ChangeDetectorRef = inject(ChangeDetectorRef);
20+
ngZone: NgZone = inject(NgZone);
21+
22+
@ViewChild('mapContainer', { static: false }) public mapContainerRef: ElementRef;
23+
24+
mapboxView: MapboxView;
25+
mapbox: MapboxApi;
26+
27+
markers: MapboxMarker[] = [];
28+
29+
ngOnInit() {
30+
console.log('----- MapboxDemo2Component initialized');
31+
Trace.addCategories(MapboxTraceCategory);
32+
Trace.enable();
33+
}
34+
35+
ngAfterViewInit() {
36+
console.log(' mapContainerRef: ', this.mapContainerRef.nativeElement);
37+
38+
const contentView = this.mapContainerRef.nativeElement;
39+
40+
const settings = {
41+
container: contentView,
42+
accessToken: MAPBOX_ACCESS_TOKEN,
43+
style: MapStyle.TRAFFIC_DAY,
44+
center: {
45+
lat: 50.681466,
46+
lng: 17.8687037
47+
},
48+
zoomLevel: 12, // 0 (most of the world) to 20, default 0
49+
showUserLocation: false, // default false
50+
hideAttribution: true, // default false
51+
hideLogo: true, // default false
52+
hideCompass: false, // default false
53+
disableRotation: false, // default false
54+
disableScroll: false, // default false
55+
disableZoom: false, // default false
56+
disableTilt: false // default false
57+
};
58+
59+
const mapView = new MapboxView();
60+
mapView.setConfig(settings);
61+
contentView.content = mapView;
62+
this.mapReady(mapView);
63+
}
64+
65+
mapReady(mapView: MapboxView): void {
66+
mapView.on('mapReady', (args: any) => {
67+
this.mapboxView = args.map;
68+
this.mapbox = this.mapboxView.getMapboxApi();
69+
this.cd.detectChanges();
70+
console.log('mapboxView map is ready:', this.mapboxView);
71+
});
72+
}
73+
74+
goBack(): void {
75+
this.router.back();
76+
}
77+
78+
ngOnDestroy(): void {
79+
if (this.mapbox) {
80+
this.mapbox.destroy();
81+
}
82+
}
83+
}

‎demo-snippets/ng/mapbox-demo3/mapbox-demo3.component.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<ActionBar>
2+
<NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
3+
<Label text="Basic Map 3 module"></Label>
4+
</ActionBar>
5+
6+
<GridLayout rows="auto,*,auto" height="100%" width="100%" padding="0" flexDirection="column">
7+
<app-mapbox-header row="0" [mapbox]="mapbox"></app-mapbox-header>
8+
<ContentView row="1"
9+
width="300"
10+
height="300"
11+
(loaded)="loadedMap($event)">
12+
</ContentView>
13+
<app-mapbox-footer row="2"></app-mapbox-footer>
14+
</GridLayout>

‎demo-snippets/ng/mapbox-demo3/mapbox-demo3.component.ts‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { ChangeDetectorRef, Component, OnDestroy, OnInit, inject } from '@angular/core';
2+
import { RouterExtensions, registerElement } from '@nativescript/angular';
3+
import { MapStyle, MapboxApi, MapboxMarker, MapboxTraceCategory, MapboxView } from '@nativescript-community/ui-mapbox';
4+
import { ContentView, EventData, Trace } from '@nativescript/core';
5+
6+
import { MapboxHeaderComponent } from '../mapbox-header/mapbox-header.component';
7+
import { MAPBOX_ACCESS_TOKEN } from '../mapbox-token';
8+
import { MapboxFooterComponent } from '../mapbox-footer/mapbox-footer.component';
9+
10+
registerElement('Mapbox', () => require('@nativescript-community/ui-mapbox').MapboxView);
11+
12+
@Component({
13+
selector: 'app-mapbox-demo3',
14+
templateUrl: './mapbox-demo3.component.html',
15+
standalone: false
16+
})
17+
export class MapboxDemo3Component implements OnInit, OnDestroy {
18+
router: RouterExtensions = inject(RouterExtensions);
19+
cd: ChangeDetectorRef = inject(ChangeDetectorRef);
20+
21+
mapContainer: ContentView;
22+
mapboxView: MapboxView;
23+
mapbox: MapboxApi;
24+
25+
markers: MapboxMarker[] = [];
26+
27+
ngOnInit() {
28+
console.log('----- MapboxDemo2Component initialized');
29+
Trace.addCategories(MapboxTraceCategory);
30+
Trace.enable();
31+
}
32+
33+
loadedMap(args: EventData) {
34+
this.mapContainer = args.object as ContentView;
35+
const settings = {
36+
container: this.mapContainer,
37+
accessToken: MAPBOX_ACCESS_TOKEN,
38+
style: MapStyle.TRAFFIC_DAY,
39+
center: {
40+
lat: 50.681466,
41+
lng: 17.8687037
42+
},
43+
zoomLevel: 12, // 0 (most of the world) to 20, default 0
44+
showUserLocation: false, // default false
45+
hideAttribution: true, // default false
46+
hideLogo: true, // default false
47+
hideCompass: false, // default false
48+
disableRotation: false, // default false
49+
disableScroll: false, // default false
50+
disableZoom: false, // default false
51+
disableTilt: false // default false
52+
};
53+
54+
const mapView = new MapboxView();
55+
mapView.setConfig(settings);
56+
this.mapContainer.content = mapView;
57+
this.mapReady(mapView);
58+
}
59+
60+
mapReady(mapView: MapboxView): void {
61+
mapView.on('mapReady', (args: any) => {
62+
this.mapboxView = args.map;
63+
this.mapbox = this.mapboxView.getMapboxApi();
64+
this.cd.detectChanges();
65+
console.log('mapboxView map is ready:', this.mapboxView);
66+
});
67+
}
68+
69+
goBack(): void {
70+
this.router.back();
71+
}
72+
73+
ngOnDestroy(): void {
74+
if (this.mapbox) {
75+
this.mapbox.destroy();
76+
}
77+
}
78+
79+
goToMapbox(route: string) {
80+
this.router.navigate([route]).then((r) => {
81+
console.log(`Navigation to ${route} successful: `, r);
82+
});
83+
}
84+
}

0 commit comments

Comments
 (0)