WIP: feat(Source): allow geojson url source

demo-snippets/App_Resources/Android/src/main/res/AndroidManifest.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+	package="__PACKAGE__"
+	android:versionCode="10000"
+	android:versionName="1.0">
+
+	<supports-screens
+		android:smallScreens="true"
+		android:normalScreens="true"
+		android:largeScreens="true"
+		android:xlargeScreens="true"/>
+
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+	<uses-permission android:name="android.permission.INTERNET"/>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+
+	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+
+	<application
+		android:name="com.tns.NativeScriptApplication"
+		android:allowBackup="true"
+		android:icon="@mipmap/ic_launcher"
+		android:label="@string/app_name"
+		android:theme="@style/AppTheme"
+		android:hardwareAccelerated="true">
+
+		<activity
+			android:name="com.tns.NativeScriptActivity"
+			android:label="@string/title_activity_kimera"
+			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
+			android:theme="@style/LaunchScreenTheme"
+			android:hardwareAccelerated="true"
+      		android:launchMode="singleTask"
+			android:exported="true">
+
+			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
+
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.tns.ErrorReportActivity"/>
+	</application>
+</manifest>

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 }
+];

src/ui-mapbox/index.android.ts

@@ -2525,8 +2525,12 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
 
                         const geoJsonSource = new com.mapbox.mapboxsdk.style.sources.GeoJsonSource(id, geojsonOptions);
                         if (options.data) {
-                            const geoJsonString = JSON.stringify(options.data);
-                            geoJsonSource.setGeoJson(geoJsonString);
+                            if (typeof options.data === 'string') {
+                                geoJsonSource.setUri(options.data);
+                            } else {
+                                const geoJsonString = JSON.stringify(options.data);
+                                geoJsonSource.setGeoJson(geoJsonString);
+                            }
                         }
 
                         source = geoJsonSource;

src/ui-mapbox/index.ios.ts

@@ -2759,12 +2759,6 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                             reject("Remove the layer with this id first with 'removeLayer': " + id);
                             return;
                         }
-                        let geoJsonShape: MGLShape;
-                        if (options.data) {
-                            const content: NSString = NSString.stringWithString(JSON.stringify(options.data));
-                            const nsData: NSData = content.dataUsingEncoding(NSUTF8StringEncoding);
-                            geoJsonShape = MGLShape.shapeWithDataEncodingError(nsData, NSUTF8StringEncoding);
-                        }
 
                         const sourceOptions: any = {};
                         if (options.minzoom !== undefined) {
@@ -2793,8 +2787,18 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                             }
                         }
 
-                        source = MGLShapeSource.alloc().initWithIdentifierShapeOptions(id, geoJsonShape, sourceOptions);
-
+                        if (typeof options.data === 'string') {
+                            const url = NSURL.URLWithString(options.data);
+                            source = MGLShapeSource.alloc().initWithIdentifierURLOptions(id, url, sourceOptions);
+                        } else {
+                            let geoJsonShape: MGLShape;
+                            if (options.data) {
+                                const content: NSString = NSString.stringWithString(JSON.stringify(options.data));
+                                const nsData: NSData = content.dataUsingEncoding(NSUTF8StringEncoding);
+                                geoJsonShape = MGLShape.shapeWithDataEncodingError(nsData, NSUTF8StringEncoding);
+                            }
+                            source = MGLShapeSource.alloc().initWithIdentifierShapeOptions(id, geoJsonShape, sourceOptions);
+                        }
                         break;
                     case 'raster': {
                         const sourceOptions: any = {