feat: support adding images from HTTP and base64 data URLs

Author: notclive

README.md

@@ -800,6 +800,34 @@ Remove a layer added with addLayer() by id.
   mapbox.removeLayer( id );
 ```
 
+### addImage
+Add an image with `addImage` by providing an id and image path.
+
+The image path can be either:
+1. a resource path, which will be loaded using [`fromFileOrResourceSync`](https://docs.nativescript.org/api/class/ImageSource#fromfileorresourcesync)
+
+```js
+mapbox.addImage('my-resource', 'res://my-resource');
+```
+
+2. a local path, which will be loaded using [`fromFileOrResourceSync`](https://docs.nativescript.org/api/class/ImageSource#fromfileorresourcesync)
+
+```js
+mapbox.addImage('my-local-image', '~/my-local-image.png');
+```
+
+3. a base64 data URL, which will be loaded using [`fromBase64Sync`](https://docs.nativescript.org/api/class/ImageSource#frombase64sync)
+
+```js
+mapbox.addImage('my-base64-image', 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=');
+```
+
+4. an HTTP URL, which will be loaded using [`fromUrl`](https://docs.nativescript.org/api/class/ImageSource#fromurl)
+
+```js
+mapbox.addImage('my-web-image', 'https://picsum.photos/200');
+```
+
 ### queryRenderedFeatures
 https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures
 Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

src/ui-mapbox/common.ts

@@ -1,4 +1,4 @@
-import { Color, ContentView, ImageSource, Property, Trace, booleanConverter } from '@nativescript/core';
+import { Color, ContentView, ImageSource, Property, Trace, Utils, booleanConverter } from '@nativescript/core';
 
 export * from './geo.utils';
 export * from './expression/expression-parser';
@@ -712,7 +712,7 @@ export interface MapboxApi {
 
     getImage(imageId: string, nativeMap?: any): Promise<ImageSource>;
 
-    addImage(imageId: string, image: string, nativeMap?: any): Promise<void>;
+    addImage(imageId: string, imagePath: string, nativeMap?: any): Promise<void>;
 
     removeImage(imageId: string, nativeMap?: any): Promise<void>;
     project(data: LatLng): { x: number; y: number };
@@ -773,6 +773,17 @@ export abstract class MapboxCommon implements MapboxCommonApi {
     async hasFineLocationPermission() {
         return true;
     }
+
+    protected async fetchImageSource(imagePath: string): Promise<ImageSource> {
+        if (Utils.isDataURI(imagePath)) {
+            const [, base64] = imagePath.split(';base64,');
+            return ImageSource.fromBase64Sync(base64);
+        }
+        if (Utils.isFileOrResourcePath(imagePath)) {
+            return ImageSource.fromFileOrResourceSync(imagePath);
+        }
+        return ImageSource.fromUrl(imagePath);
+    }
 }
 
 // ------------------------------------------------------------
@@ -872,7 +883,7 @@ export interface MapboxViewApi {
 
     getImage(imageId: string, nativeMap?: any): Promise<ImageSource>;
 
-    addImage(imageId: string, image: string, nativeMap?: any): Promise<void>;
+    addImage(imageId: string, imagePath: string, nativeMap?: any): Promise<void>;
 
     removeImage(imageId: string, nativeMap?: any): Promise<void>;
 
@@ -1060,8 +1071,8 @@ export abstract class MapboxViewCommonBase extends ContentView implements Mapbox
     getImage(imageId: string): Promise<ImageSource> {
         return this.mapbox.getImage(imageId, this.getNativeMapView());
     }
-    addImage(imageId: string, image: string): Promise<void> {
-        return this.mapbox.addImage(imageId, image, this.getNativeMapView());
+    addImage(imageId: string, imagePath: string): Promise<void> {
+        return this.mapbox.addImage(imageId, imagePath, this.getNativeMapView());
     }
     removeImage(imageId: string): Promise<void> {
         return this.mapbox.removeImage(imageId, this.getNativeMapView());

src/ui-mapbox/index.android.ts

@@ -5,7 +5,7 @@
  */
 
 import { request } from '@nativescript-community/perms';
-import { AndroidApplication, Application, Color, File, Http, Image, ImageSource, Trace, Utils, knownFolders, path } from '@nativescript/core';
+import { AndroidApplication, Application, Color, File, Http, ImageSource, Trace, Utils, knownFolders, path } from '@nativescript/core';
 import { ExpressionParser } from './expression/expression-parser';
 import { Layer, LayerFactory } from './layers/layer-factory';
 import {
@@ -27,7 +27,6 @@ import {
     MapboxApi,
     MapboxCommon,
     MapboxMarker,
-    MapboxTraceCategory,
     MapboxViewBase,
     OfflineRegion,
     QueryRenderedFeaturesOptions,
@@ -1223,23 +1222,18 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         });
     }
 
-    async addImage(imageId: string, image: string, nativeMap?: any): Promise<void> {
-        return new Promise((resolve, reject) => {
+    async addImage(imageId: string, imagePath: string, nativeMap?: any): Promise<void> {
+        return new Promise(async (resolve, reject) => {
             const theMap = nativeMap || this._mapboxMapInstance;
 
             if (!theMap) {
                 reject('No map has been loaded');
                 return;
             }
 
-            if (!image.startsWith('res://')) {
-                image = path.join(knownFolders.currentApp().path, image.replace('~/', ''));
-            }
-
-            const img = ImageSource.fromFileOrResourceSync(image);
-
             try {
-                theMap.getStyle().addImage(imageId, img.android);
+                const imageSource = await this.fetchImageSource(imagePath);
+                theMap.getStyle().addImage(imageId, imageSource.android);
                 resolve();
             } catch (ex) {
                 reject('Error during addImage: ' + ex);

src/ui-mapbox/index.d.ts

@@ -43,7 +43,7 @@ export declare class Mapbox extends MapboxCommon implements MapboxApi {
     onDestroy(nativeMap?: any): Promise<void>;
     setMapStyle(style: string | MapStyle, nativeMap?: any): Promise<void>;
     getImage(imageId: string, nativeMap?: any): Promise<ImageSource>;
-    addImage(imageId: string, image: string, nativeMap?: any): Promise<void>;
+    addImage(imageId: string, imagePath: string, nativeMap?: any): Promise<void>;
     removeImage(imageId: string, nativeMap?: any): Promise<void>;
     addMarkers(markers: MapboxMarker[], nativeMap?: any): Promise<void>;
     removeMarkers(ids?: any, nativeMap?: any): Promise<void>;

src/ui-mapbox/index.ios.ts

@@ -18,7 +18,6 @@ import {
     MapboxApi,
     MapboxCommon,
     MapboxMarker,
-    MapboxTraceCategory,
     MapboxViewBase,
     OfflineRegion,
     QueryRenderedFeaturesOptions,
@@ -1216,24 +1215,18 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         });
     }
 
-    async addImage(imageId: string, image: string, nativeMap?: any): Promise<void> {
-        return new Promise((resolve, reject) => {
+    async addImage(imageId: string, imagePath: string, nativeMap?: any): Promise<void> {
+        return new Promise(async (resolve, reject) => {
             const theMap: MGLMapView = nativeMap || this._mapboxViewInstance;
 
             if (!theMap) {
                 reject('No map has been loaded');
                 return;
             }
 
-            if (!image.startsWith('res://')) {
-                const appPath = knownFolders.currentApp().path;
-                image = appPath + '/' + image.replace('~/', '');
-            }
-
-            const img = ImageSource.fromFileOrResourceSync(image);
-
             try {
-                theMap.style.setImageForName(img.ios, imageId);
+                const imageSource = await this.fetchImageSource(imagePath);
+                theMap.style.setImageForName(imageSource.ios, imageId);
                 resolve();
             } catch (ex) {
                 reject('Error during addImage: ' + ex);