Add support for using SDF template images

android/src/main/java/org/maplibre/reactnative/components/images/MLRNImagesManager.java

@@ -64,6 +64,9 @@ public void setImages(MLRNImages images, ReadableMap map) {
                 boolean hasScale = imageMap.hasKey("scale") && imageMap.getType("scale") == ReadableType.Number;
                 double scale = hasScale ? imageMap.getDouble("scale") : ImageEntry.defaultScale;
                 imageEntry = new ImageEntry(uri, scale);
+
+                boolean hasSdf = imageMap.hasKey("sdf") && imageMap.getType("sdf") == ReadableType.Boolean;
+                imageEntry.sdf = hasSdf && imageMap.getBoolean("sdf");
             } else {
                 imageEntry = new ImageEntry(map.getString(imageName));
             }

android/src/main/java/org/maplibre/reactnative/utils/DownloadMapImageTask.java

@@ -33,7 +33,7 @@
 
 import javax.annotation.Nullable;
 
-public class DownloadMapImageTask extends AsyncTask<Map.Entry<String, ImageEntry>, Void, List<Map.Entry<String, Bitmap>>> {
+public class DownloadMapImageTask extends AsyncTask<Map.Entry<String, ImageEntry>, Void, List<Map.Entry<String, DownloadedImage>>> {
     public static final String LOG_TAG = "DownloadMapImageTask";
 
     private WeakReference<Context> mContext;
@@ -55,8 +55,8 @@ public interface OnAllImagesLoaded {
 
     @SafeVarargs
     @Override
-    protected final List<Map.Entry<String, Bitmap>> doInBackground(Map.Entry<String, ImageEntry>... objects) {
-        List<Map.Entry<String, Bitmap>> images = new ArrayList<>();
+    protected final List<Map.Entry<String, DownloadedImage>> doInBackground(Map.Entry<String, ImageEntry>... objects) {
+        List<Map.Entry<String, DownloadedImage>> images = new ArrayList<>();
 
         Context context = mContext.get();
         if (context == null) return images;
@@ -95,7 +95,7 @@ protected final List<Map.Entry<String, Bitmap>> doInBackground(Map.Entry<String,
                                 // the fresco reference.
                                 .copy(Bitmap.Config.ARGB_8888, true);
                             bitmap.setDensity((int) ((double) DisplayMetrics.DENSITY_DEFAULT * imageEntry.getScaleOr(1.0)));
-                            images.add(new AbstractMap.SimpleEntry<>(object.getKey(), bitmap));
+                            images.add(new AbstractMap.SimpleEntry<>(object.getKey(), new DownloadedImage(object.getKey(), bitmap, imageEntry)));
                         } else {
                             FLog.e(LOG_TAG, "Failed to load bitmap from: " + uri);
                         }
@@ -114,7 +114,7 @@ protected final List<Map.Entry<String, Bitmap>> doInBackground(Map.Entry<String,
                 // local asset required from JS require('image.png') or import icon from 'image.png' while in release mode
                 Bitmap bitmap = BitmapUtils.getBitmapFromResource(context, uri, getBitmapOptions(metrics, imageEntry.scale));
                 if (bitmap != null) {
-                    images.add(new AbstractMap.SimpleEntry<>(object.getKey(), bitmap));
+                    images.add(new AbstractMap.SimpleEntry<>(object.getKey(), new DownloadedImage(object.getKey(), bitmap, imageEntry)));
                 } else {
                     FLog.e(LOG_TAG, "Failed to load bitmap from: " + uri);
                 }
@@ -125,16 +125,14 @@ protected final List<Map.Entry<String, Bitmap>> doInBackground(Map.Entry<String,
     }
 
     @Override
-    protected void onPostExecute(List<Map.Entry<String, Bitmap>> images) {
+    protected void onPostExecute(List<Map.Entry<String, DownloadedImage>> images) {
         MapLibreMap map = mMap.get();
         if (map != null && images != null && images.size() > 0) {
             Style style = map.getStyle();
             if (style != null) {
-                HashMap<String, Bitmap> bitmapImages = new HashMap<>();
-                for (Map.Entry<String, Bitmap> image : images) {
-                    bitmapImages.put(image.getKey(), image.getValue());
+                for (Map.Entry<String, DownloadedImage> image : images) {
+                    style.addImage(image.getKey(), image.getValue().bitmap(), image.getValue().info().sdf);
                 }
-                style.addImages(bitmapImages);
             }
         }
 

android/src/main/java/org/maplibre/reactnative/utils/DownloadedImage.java

@@ -0,0 +1,6 @@
+package org.maplibre.reactnative.utils;
+
+import android.graphics.Bitmap;
+
+public record DownloadedImage(String name, Bitmap bitmap, ImageEntry info) {
+}

android/src/main/java/org/maplibre/reactnative/utils/ImageEntry.java

@@ -4,6 +4,7 @@ public class ImageEntry {
     public String uri;
     public double scale = 1.0;
     public static final double defaultScale = 0.0;
+    public boolean sdf;
 
     public ImageEntry(String _uri, Double _scale) {
         uri = _uri;

ios/MLRN/MLRNImageQueue.h

@@ -8,6 +8,7 @@
 - (void)cancelAllOperations;
 - (void)addImage:(NSString *)imageURL
                 scale:(double)scale
+                sdf:(Boolean)sdf
                bridge:(RCTBridge *)bridge
     completionHandler:(RCTImageLoaderCompletionBlock)handler;
 

ios/MLRN/MLRNImageQueue.m

@@ -33,11 +33,13 @@ - (void)cancelAllOperations {
 
 - (void)addImage:(NSString *)imageURL
                 scale:(double)scale
+                sdf:(Boolean)sdf
                bridge:(RCTBridge *)bridge
     completionHandler:(RCTImageLoaderCompletionBlock)handler {
   MLRNImageQueueOperation *operation = [[MLRNImageQueueOperation alloc] init];
   operation.bridge = bridge;
   operation.urlRequest = [RCTConvert NSURLRequest:imageURL];
+  operation.sdf = sdf;
   operation.completionHandler = handler;
   operation.scale = scale;
   [imageQueue addOperation:operation];

ios/MLRN/MLRNImageQueueOperation.h

@@ -5,6 +5,7 @@
 @property (nonatomic, weak) RCTBridge *bridge;
 @property (nonatomic, copy) RCTImageLoaderCompletionBlock completionHandler;
 @property (nonatomic, copy) NSURLRequest *urlRequest;
+@property (nonatomic) Boolean sdf;
 @property (nonatomic) double scale;
 
 @end

ios/MLRN/MLRNImageQueueOperation.m

@@ -111,8 +111,11 @@ - (void)start {
                                            progressBlock:nil
                                         partialLoadBlock:nil
                                          completionBlock:^void(NSError *error, UIImage *image) {
-                                           weakSelf.completionHandler(error, image);
-                                           [weakSelf setState:IOState_Finished
+                                          if (image && weakSelf.sdf) {
+                                            image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+                                          }
+                                          weakSelf.completionHandler(error, image);
+                                          [weakSelf setState:IOState_Finished
                                                        except:IOState_Finished];
                                          }]];
     if ([weakSelf setState:IOState_Executing

ios/MLRN/MLRNStyle.m

@@ -56,7 +56,7 @@ - (void)fillLayer:(MLNFillStyleLayer *)layer withReactStyle:(NSDictionary *)reac
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf]  callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
@@ -138,7 +138,7 @@ - (void)lineLayer:(MLNLineStyleLayer *)layer withReactStyle:(NSDictionary *)reac
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf]  callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
@@ -200,7 +200,7 @@ - (void)symbolLayer:(MLNSymbolStyleLayer *)layer withReactStyle:(NSDictionary *)
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+          [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf] callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
@@ -454,7 +454,7 @@ - (void)fillExtrusionLayer:(MLNFillExtrusionStyleLayer *)layer withReactStyle:(N
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf]  callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {
@@ -592,7 +592,7 @@ - (void)backgroundLayer:(MLNBackgroundStyleLayer *)layer withReactStyle:(NSDicti
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+          [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf]  callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {

ios/MLRN/MLRNStyleValue.h

@@ -10,6 +10,7 @@
 - (BOOL)shouldAddImage;
 - (NSString *)getImageURI;
 - (double)getImageScale;
+- (BOOL)getImageSdf;
 - (MLNTransition)getTransition;
 - (NSExpression *)getSphericalPosition;
 - (BOOL)isVisible;

ios/MLRN/MLRNStyleValue.m

@@ -114,18 +114,33 @@ - (double)getImageScale {
   }
 }
 
-- (MLNTransition)getTransition {
-  if (![expressionJSON isKindOfClass:[NSDictionary class]]) {
-    return MLNTransitionMake(0.f, 0.f);
-  }
-
-  NSDictionary *config = (NSDictionary *)expressionJSON;
-  double duration = config[@"duration"] != nil ? [config[@"duration"] doubleValue] : 300.0;
-  double delay = config[@"delay"] != nil ? [config[@"delay"] doubleValue] : 0.0;
-
-  const double millisecondsToSeconds = 1.0 / 1000.0;
+- (BOOL)getImageSdf
+{
+    if ([expressionJSON isKindOfClass:[NSDictionary class]]) {
+        id sdf = [expressionJSON valueForKey:@"sdf"];
+        if ([sdf isKindOfClass:[NSNumber class]]) {
+            return [sdf boolValue];
+        } else {
+            return false;
+        }
+    } else {
+        return false;
+    }
+}
 
-  return MLNTransitionMake(duration * millisecondsToSeconds, delay * millisecondsToSeconds);
+- (MLNTransition)getTransition
+{
+    if (![expressionJSON isKindOfClass:[NSDictionary class]]) {
+        return MLNTransitionMake(0.f, 0.f);
+    }
+
+    NSDictionary *config = (NSDictionary *)expressionJSON;
+    double duration = config[@"duration"] != nil ? [config[@"duration"] doubleValue] : 300.0;
+    double delay = config[@"delay"] != nil ? [config[@"delay"] doubleValue] : 0.0;
+
+    const double millisecondsToSeconds = 1.0/1000.0;
+
+    return MLNTransitionMake(duration * millisecondsToSeconds, delay * millisecondsToSeconds);
 }
 
 - (NSExpression *)getSphericalPosition {

ios/MLRN/MLRNUtils.h

@@ -17,6 +17,7 @@
 + (void)fetchImage:(RCTBridge *)bridge
                url:(NSString *)url
              scale:(double)scale
+             sdf:(Boolean)sdf
           callback:(RCTImageLoaderCompletionBlock)callback;
 + (void)fetchImages:(RCTBridge *)bridge
               style:(MLNStyle *)style

ios/MLRN/MLRNUtils.m

@@ -79,6 +79,7 @@ + (CGVector)toCGVector:(NSArray<NSNumber *> *)arr {
 + (void)fetchImage:(RCTBridge *)bridge
                url:(NSString *)url
              scale:(double)scale
+             sdf:(Boolean)sdf
           callback:(RCTImageLoaderCompletionBlock)callback {
   [MLRNImageQueue.sharedInstance addImage:url scale:scale bridge:bridge completionHandler:callback];
 }
@@ -117,9 +118,12 @@ + (void)fetchImages:(RCTBridge *)bridge
       NSDictionary *image = objects[imageName];
       BOOL hasScale =
           [image isKindOfClass:[NSDictionary class]] && ([image objectForKey:@"scale"] != nil);
+      BOOL hasSdf = [image isKindOfClass:[NSDictionary class]] && ([image objectForKey:@"sdf"] != nil);
       double scale = hasScale ? [[image objectForKey:@"scale"] doubleValue] : 1.0;
+      double sdf = hasSdf ? [[image objectForKey:@"sdf"] boolValue] : false;
       [MLRNImageQueue.sharedInstance addImage:objects[imageName]
                                         scale:scale
+                                        sdf:sdf
                                        bridge:bridge
                             completionHandler:^(NSError *error, UIImage *image) {
                               if (!image) {

scripts/templates/MLRNStyle.m.ejs

@@ -38,7 +38,7 @@
       } else {
         NSString *imageURI = [styleValue getImageURI];
 
-        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] callback:^(NSError *error, UIImage *image) {
+        [MLRNUtils fetchImage:_bridge url:imageURI scale:[styleValue getImageScale] sdf:[styleValue getImageSdf] callback:^(NSError *error, UIImage *image) {
           if (image != nil) {
             dispatch_async(dispatch_get_main_queue(), ^{
               if (isValid()) {

src/components/Images.tsx

@@ -11,7 +11,9 @@ import { type BaseProps } from "../types/BaseProps";
 
 export const NATIVE_MODULE_NAME = "MLRNImages";
 
-export type ImageEntry = string | ImageSourcePropType;
+export type ImageURISourceWithSdf = ImageURISource & { sdf?: boolean };
+export type ImageEntry = string | ImageSourcePropType | ImageURISourceWithSdf;
+//export type ImageEntry = string | ImageEntryData;
 
 function _isUrlOrPath(value: ImageEntry): boolean {
   return (