add example

Author: vhdirk

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

@@ -6,7 +6,7 @@
 <StackLayout>
     <ContentView height="100%" width="100%">
         <Mapbox
-            accessToken="YOUR_ACCESS_TOKEN"
+            [accessToken]="accessToken"
             mapStyle="traffic_day"
             latitude="50.467735"
             longitude="13.427718"

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

@@ -1,12 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { RouterExtensions } from '@nativescript/angular';
+import { MAPBOX_API_KEY } from '../common';
 
 @Component({
     selector: 'ns-basic-map',
     templateUrl: './basic-map.component.html'
 })
 export class BasicMapComponent implements OnInit {
-    constructor(private router: RouterExtensions) {}
+    constructor(@Inject(MAPBOX_API_KEY) public accessToken: string, private router: RouterExtensions) {}
 
     ngOnInit(): void {}
 

demo-snippets/ng/common.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core'
+
+export const MAPBOX_API_KEY = new InjectionToken('MapboxApiKey');

demo-snippets/ng/geojson-url/geojson-url.component.html

@@ -0,0 +1,23 @@
+<ActionBar>
+    <NavigationButton android.systemIcon="ic_menu_back" (tap)="goBack()"></NavigationButton>
+    <Label text="Source with URL"></Label>
+</ActionBar>
+
+<StackLayout>
+    <ContentView height="100%" width="100%">
+        <Mapbox
+            [accessToken]="accessToken"
+            mapStyle="mapbox://styles/mapbox/satellite-v9"
+            latitude="138.043"
+            longitude="35.201]"
+            hideCompass="true"
+            zoomLevel="7"
+            showUserLocation="false"
+            disableZoom="false"
+            disableRotation="false"
+            disableScroll="false"
+            disableTilt="false"
+            (mapReady)="onMapReady($event)">
+        </Mapbox>
+    </ContentView>
+</StackLayout>

demo-snippets/ng/geojson-url/geojson-url.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit ,Inject } from '@angular/core';
+import { RouterExtensions } from '@nativescript/angular';
+import { MAPBOX_API_KEY } from '../common';
+
+@Component({
+    selector: 'ns-geojson-url',
+    templateUrl: './geojson-url.component.html'
+})
+export class GeoJSONURLComponent implements OnInit {
+    constructor(@Inject(MAPBOX_API_KEY) public accessToken: string, private router: RouterExtensions) {}
+
+    ngOnInit(): void {}
+
+    goBack(): void {
+        this.router.back();
+    }
+
+    onMapReady(args): void {
+        console.log('map is ready');
+
+        const map = args.map;
+
+        map.addSource('earthquakes', {
+            type: 'geojson',
+            // Use a URL for the value for the `data` property.
+            data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
+        });
+
+        map.addLayer({
+            'id': 'earthquakes-layer',
+            'type': 'circle',
+            'source': 'earthquakes',
+            'paint': {
+                'circle-radius': 8,
+                'circle-stroke-width': 2,
+                'circle-color': 'red',
+                'circle-stroke-color': 'white'
+            }
+        });
+
+    }
+}

demo-snippets/ng/install.module.ts

@@ -1,18 +1,30 @@
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 
 import { registerElement } from '@nativescript/angular';
+import { MAPBOX_API_KEY } from './common';
 registerElement('Mapbox', () => require('@nativescript-community/ui-mapbox').MapboxView);
 
 import { BasicMapComponent } from './basic-map/basic-map.component';
+import { GeoJSONURLComponent } from './geojson-url/geojson-url.component';
 
-export const COMPONENTS = [BasicMapComponent];
+export const COMPONENTS = [BasicMapComponent, GeoJSONURLComponent];
 @NgModule({
     imports: [],
     exports: [],
-    schemas: [NO_ERRORS_SCHEMA]
+    schemas: [NO_ERRORS_SCHEMA],
+    providers: [
+        {
+            provide: MAPBOX_API_KEY,
+            useValue: "YOUR_ACCESS_TOKEN",
+        },
+    ]
 })
+
 export class InstallModule {}
 
 export function installPlugin() {}
 
-export const demos = [{ name: 'Basic Map', path: 'basic-map', component: BasicMapComponent }];
+export const demos = [
+    { name: 'Basic Map', path: 'basic-map', component: BasicMapComponent },
+    { name: 'GeoJSON URL', path: 'geojson-url', component: GeoJSONURLComponent }
+];