From d7f107d0fb49588fdc1df6c56e7ef97dc4a06281 Mon Sep 17 00:00:00 2001 From: Marius Petcu Date: Mon, 11 Jul 2016 21:47:42 +0300 Subject: [PATCH] Replace image! with source: { uri } --- API.md | 10 ++- .../RNMGLAnnotationOptionsFactory.java | 14 ++-- example.js | 8 +- ios/RCTMapboxGL/RCTMapboxGL.h | 2 +- ios/RCTMapboxGL/RCTMapboxGL.m | 18 ++-- ios/RCTMapboxGL/RCTMapboxGLConversions.h | 1 + ios/RCTMapboxGL/RCTMapboxGLConversions.m | 84 ++++++++----------- 7 files changed, 65 insertions(+), 72 deletions(-) diff --git a/API.md b/API.md index 66b2f2b..91f1fea 100644 --- a/API.md +++ b/API.md @@ -234,18 +234,22 @@ mapbox://styles/bobbysud/cigtw1pzy0000aam2346f7ex0 strokeWidth, // optional. number. Only for type=polygon or type=polyline. Controls line width. id, // required. string. Unique identifier used for adding or selecting an annotation. annotationImage, { // optional. Marker image for type=point - url, // required. string. Either remote image URL or 'image!yourImage' + source: { + uri // required. string. Either remote image URL or the name (without extension) of a bundled image + }, height, // required. number. Image height width, // required. number. Image width }, rightCalloutAccessory, { // optional. iOS only. Clickable image that appears when type=point marker pressed - url, // required. string. Either remote image URL or 'image!yourImage' + source: { + uri // required. string. Either remote image URL or the name (without extension) of a bundled image + }, height, // required. number. Image height width, // required. number. Image width }, }] ``` -**For adding local images via `image!yourImage`, on iOS see [adding static resources to your app using Images.xcassets docs](https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets) +**For using locally bundled images, on iOS see [adding static resources to your app using Images.xcassets docs](https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets) and on Android, put images in `android/app/src/main/res/drawable/yourImage.png`**. #### Example diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java index e98d642..f3cdc7a 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java @@ -21,6 +21,7 @@ import com.mapbox.mapboxsdk.maps.MapboxMap; import java.io.IOException; import java.io.InputStream; import java.net.HttpURLConnection; +import java.net.MalformedURLException; import java.net.URL; import java.util.HashMap; import java.util.Map; @@ -97,16 +98,17 @@ public class RNMGLAnnotationOptionsFactory { static Map iconCache = new HashMap(); - static Icon iconFromPathAndSize(Context context, String path, int width, int height) throws IOException { + static Icon iconFromSourceAndSize(Context context, ReadableMap source, int width, int height) throws IOException { + String path = source.getString("uri"); String cacheKey = path + "||" + width + "||" + height; Icon icon = iconCache.get(cacheKey); if (icon != null) { return icon; } Drawable drawable; - if (path.startsWith("image!")) { - drawable = drawableFromDrawableName(context, path.replace("image!", "")); - } else { + try { drawable = drawableFromUrl(context, path); + } catch (MalformedURLException ex) { + drawable = drawableFromDrawableName(context, path); } IconFactory iconFactory = IconFactory.getInstance(context); @@ -148,7 +150,7 @@ public class RNMGLAnnotationOptionsFactory { if (annotation.hasKey("annotationImage")) { ReadableMap annotationImage = annotation.getMap("annotationImage"); - String annotationURL = annotationImage.getString("url"); + ReadableMap annotationSource = annotationImage.getMap("source"); try { int width = -1; int height = -1; @@ -159,7 +161,7 @@ public class RNMGLAnnotationOptionsFactory { width = Math.round((float)annotationImage.getInt("width") * scale); } - marker.icon(iconFromPathAndSize(context, annotationURL, width, height)); + marker.icon(iconFromSourceAndSize(context, annotationSource, width, height)); } catch (Exception e) { e.printStackTrace(); } diff --git a/example.js b/example.js index 0d35105..c68a4c4 100644 --- a/example.js +++ b/example.js @@ -28,12 +28,12 @@ class MapExample extends Component { title: 'This is marker 1', subtitle: 'It has a rightCalloutAccessory too', rightCalloutAccessory: { - url: 'https://cldup.com/9Lp0EaBw5s.png', + source: { uri: 'https://cldup.com/9Lp0EaBw5s.png' }, height: 25, width: 25 }, annotationImage: { - url: 'https://cldup.com/CnRLZem9k9.png', + source: { uri: 'https://cldup.com/CnRLZem9k9.png' }, height: 25, width: 25 }, @@ -44,7 +44,7 @@ class MapExample extends Component { title: 'Important!', subtitle: 'Neat, this is a custom annotation image', annotationImage: { - url: 'https://cldup.com/7NLZklp8zS.png', + source: { uri: 'https://cldup.com/7NLZklp8zS.png' }, height: 25, width: 25 }, @@ -141,7 +141,7 @@ class MapExample extends Component { title: 'New Title!', subtitle: 'New Subtitle', annotationImage: { - url: 'https://cldup.com/7NLZklp8zS.png', + source: { uri: 'https://cldup.com/7NLZklp8zS.png' }, height: 25, width: 25 }, diff --git a/ios/RCTMapboxGL/RCTMapboxGL.h b/ios/RCTMapboxGL/RCTMapboxGL.h index 45e3a19..cf28b41 100644 --- a/ios/RCTMapboxGL/RCTMapboxGL.h +++ b/ios/RCTMapboxGL/RCTMapboxGL.h @@ -70,7 +70,7 @@ @property (nonatomic, strong) UIButton *rightCalloutAccessory; @property (nonatomic) NSString *id; -@property (nonatomic) NSString *annotationImageURL; +@property (nonatomic) NSDictionary *annotationImageSource; @property (nonatomic) CGSize annotationImageSize; + (instancetype)annotationWithLocation:(CLLocationCoordinate2D)coordinate title:(NSString *)title subtitle:(NSString *)subtitle id:(NSString *)id; diff --git a/ios/RCTMapboxGL/RCTMapboxGL.m b/ios/RCTMapboxGL/RCTMapboxGL.m index e9eb479..aac5c07 100644 --- a/ios/RCTMapboxGL/RCTMapboxGL.m +++ b/ios/RCTMapboxGL/RCTMapboxGL.m @@ -11,6 +11,7 @@ #import "RCTEventDispatcher.h" #import "UIView+React.h" #import "RCTLog.h" +#import "RCTMapboxGLConversions.h" @implementation RCTMapboxGL { /* Required to publish events */ @@ -219,25 +220,20 @@ - (MGLAnnotationImage *)mapView:(MGLMapView *)mapView imageForAnnotation:(id)annotation { - NSString *url = [(RCTMGLAnnotation *) annotation annotationImageURL]; - if (!url) { return nil; } + NSDictionary *source = [(RCTMGLAnnotation *) annotation annotationImageSource]; + if (!source) { return nil; } CGSize imageSize = [(RCTMGLAnnotation *) annotation annotationImageSize]; - MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:url]; + NSString *reuseIdentifier = source[@"uri"]; + MGLAnnotationImage *annotationImage = [mapView dequeueReusableAnnotationImageWithIdentifier:reuseIdentifier]; if (!annotationImage) { - UIImage *image = nil; - if ([url hasPrefix:@"image!"]) { - NSString* localImagePath = [url substringFromIndex:6]; - image = [UIImage imageNamed:localImagePath]; - } else { - image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:url]]]; - } + UIImage *image = imageFromSource(source); UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0); [image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)]; UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); - annotationImage = [MGLAnnotationImage annotationImageWithImage:newImage reuseIdentifier:url]; + annotationImage = [MGLAnnotationImage annotationImageWithImage:newImage reuseIdentifier:reuseIdentifier]; } return annotationImage; diff --git a/ios/RCTMapboxGL/RCTMapboxGLConversions.h b/ios/RCTMapboxGL/RCTMapboxGLConversions.h index 1630694..cb7d1c3 100644 --- a/ios/RCTMapboxGL/RCTMapboxGLConversions.h +++ b/ios/RCTMapboxGL/RCTMapboxGLConversions.h @@ -6,6 +6,7 @@ // Copyright © 2016 Mapbox. All rights reserved. // +UIImage *imageFromSource (NSDictionary *source); NSObject *convertObjectToPoint (NSObject *annotationObject); NSObject *convertObjectToPolyline (NSObject *annotationObject); NSObject *convertObjectToPolygon (NSObject *annotationObject); diff --git a/ios/RCTMapboxGL/RCTMapboxGLConversions.m b/ios/RCTMapboxGL/RCTMapboxGLConversions.m index 07c05c8..47de190 100644 --- a/ios/RCTMapboxGL/RCTMapboxGLConversions.m +++ b/ios/RCTMapboxGL/RCTMapboxGLConversions.m @@ -11,6 +11,20 @@ #import "RCTConvert+MapKit.h" #import "RCTMapboxGL.h" +UIImage *imageFromSource (NSDictionary *source) +{ + if (!source) { return nil; } + NSString *uri = source[@"uri"]; + if (!uri) { return nil; } + + NSURL* checkURL = [NSURL URLWithString:uri]; + if (checkURL && checkURL.scheme && checkURL.host) { + return [UIImage imageWithData:[NSData dataWithContentsOfURL:checkURL]]; + } + + return [UIImage imageNamed:uri]; +} + NSObject *convertObjectToPoint (NSObject *annotationObject) { NSString *title = @""; @@ -28,23 +42,15 @@ NSObject *convertObjectToPoint (NSObject *annotationObject) id = [RCTConvert NSString:[annotationObject valueForKey:@"id"]]; } + RCTMGLAnnotation *point; + if ([annotationObject valueForKey:@"rightCalloutAccessory"]) { - NSObject *rightCalloutAccessory = [annotationObject valueForKey:@"rightCalloutAccessory"]; - NSString *url = [rightCalloutAccessory valueForKey:@"url"]; + NSDictionary *rightCalloutAccessory = [annotationObject valueForKey:@"rightCalloutAccessory"]; + NSDictionary *imageSource = (NSDictionary*)rightCalloutAccessory[@"source"]; CGFloat height = (CGFloat)[[rightCalloutAccessory valueForKey:@"height"] floatValue]; CGFloat width = (CGFloat)[[rightCalloutAccessory valueForKey:@"width"] floatValue]; - UIImage *image = nil; - - if ([url hasPrefix:@"image!"]) { - NSString* localImagePath = [url substringFromIndex:6]; - image = [UIImage imageNamed:localImagePath]; - } - - NSURL* checkURL = [NSURL URLWithString:url]; - if (checkURL && checkURL.scheme && checkURL.host) { - image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:url]]]; - } + UIImage *image = imageFromSource(imageSource); UIButton *imageButton = [UIButton buttonWithType:UIButtonTypeCustom]; imageButton.frame = CGRectMake(0, 0, height, width); @@ -54,23 +60,7 @@ NSObject *convertObjectToPoint (NSObject *annotationObject) CLLocationDegrees lat = [coordinate[0] doubleValue]; CLLocationDegrees lng = [coordinate[1] doubleValue]; - RCTMGLAnnotation *pin = [[RCTMGLAnnotation alloc] initWithLocationRightCallout:CLLocationCoordinate2DMake(lat, lng) title:title subtitle:subtitle id:id rightCalloutAccessory:imageButton]; - - if ([annotationObject valueForKey:@"annotationImage"]) { - NSObject *annotationImage = [annotationObject valueForKey:@"annotationImage"]; - NSString *annotationImageURL = [annotationImage valueForKey:@"url"]; - CGFloat height = (CGFloat)[[annotationImage valueForKey:@"height"] floatValue]; - CGFloat width = (CGFloat)[[annotationImage valueForKey:@"width"] floatValue]; - if (!height || !width) { - RCTLogError(@"Height and width for image required"); - return nil; - } - CGSize annotationImageSize = CGSizeMake(width, height); - pin.annotationImageURL = annotationImageURL; - pin.annotationImageSize = annotationImageSize; - } - - return pin; + point = [[RCTMGLAnnotation alloc] initWithLocationRightCallout:CLLocationCoordinate2DMake(lat, lng) title:title subtitle:subtitle id:id rightCalloutAccessory:imageButton]; } else { @@ -78,24 +68,24 @@ NSObject *convertObjectToPoint (NSObject *annotationObject) CLLocationDegrees lat = [coordinate[0] doubleValue]; CLLocationDegrees lng = [coordinate[1] doubleValue]; - RCTMGLAnnotation *point = [[RCTMGLAnnotation alloc] initWithLocation:CLLocationCoordinate2DMake(lat, lng) title:title subtitle:subtitle id:id]; - - if ([annotationObject valueForKey:@"annotationImage"]) { - NSObject *annotationImage = [annotationObject valueForKey:@"annotationImage"]; - NSString *annotationImageURL = [annotationImage valueForKey:@"url"]; - CGFloat height = (CGFloat)[[annotationImage valueForKey:@"height"] floatValue]; - CGFloat width = (CGFloat)[[annotationImage valueForKey:@"width"] floatValue]; - if (!height || !width) { - RCTLogError(@"Height and width for image required"); - return nil; - } - CGSize annotationImageSize = CGSizeMake(width, height); - point.annotationImageURL = annotationImageURL; - point.annotationImageSize = annotationImageSize; - } - - return point; + point = [[RCTMGLAnnotation alloc] initWithLocation:CLLocationCoordinate2DMake(lat, lng) title:title subtitle:subtitle id:id]; } + + if ([annotationObject valueForKey:@"annotationImage"]) { + NSDictionary *annotationImage = [annotationObject valueForKey:@"annotationImage"]; + NSDictionary *imageSource = (NSDictionary*)annotationImage[@"source"]; + CGFloat height = (CGFloat)[[annotationImage valueForKey:@"height"] floatValue]; + CGFloat width = (CGFloat)[[annotationImage valueForKey:@"width"] floatValue]; + if (!height || !width) { + RCTLogError(@"Height and width for image required"); + return nil; + } + CGSize annotationImageSize = CGSizeMake(width, height); + point.annotationImageSource = imageSource; + point.annotationImageSize = annotationImageSize; + } + + return point; } NSObject *convertObjectToPolyline (NSObject *annotationObject)