diff --git a/demo-snippets/App_Resources/Android/src/main/res/AndroidManifest.xml b/demo-snippets/App_Resources/Android/src/main/res/AndroidManifest.xml
new file mode 100644
index 0000000..821a2c5
--- /dev/null
+++ b/demo-snippets/App_Resources/Android/src/main/res/AndroidManifest.xml
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo-snippets/ng/basic-map/basic-map.component.html b/demo-snippets/ng/basic-map/basic-map.component.html
index 88498fd..72742e9 100644
--- a/demo-snippets/ng/basic-map/basic-map.component.html
+++ b/demo-snippets/ng/basic-map/basic-map.component.html
@@ -6,7 +6,7 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/demo-snippets/ng/geojson-url/geojson-url.component.ts b/demo-snippets/ng/geojson-url/geojson-url.component.ts
new file mode 100644
index 0000000..be95cce
--- /dev/null
+++ b/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'
+ }
+ });
+
+ }
+}
diff --git a/demo-snippets/ng/install.module.ts b/demo-snippets/ng/install.module.ts
index 4919238..651a025 100644
--- a/demo-snippets/ng/install.module.ts
+++ b/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 }
+];
diff --git a/src/ui-mapbox/index.android.ts b/src/ui-mapbox/index.android.ts
index 8e6d60e..2b5a16e 100755
--- a/src/ui-mapbox/index.android.ts
+++ b/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;
diff --git a/src/ui-mapbox/index.ios.ts b/src/ui-mapbox/index.ios.ts
index e7769b4..b978113 100755
--- a/src/ui-mapbox/index.ios.ts
+++ b/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 = {