Generate small thumbnail image of MKPolyline without a MKMapView? - ios

Question

Our app contains several MKPolyline boundaries that all create a closed in polygon. These are primarily to display as an MKOverlay on a MKMapView but I'm looking for a solution to display these polygons as small thumbnails to be visible not on the MKMapView but instead as a standard UIImage or UIImageView.
Just to be clear, I'm wanting these small thumbnails would just be displayed as small shapes that have a stroke color and a fill color but without any map background.
Could anyone help me with this?

Answer 1

Here you go.
+ (UIImage *)imageNamed:(NSString *)name withColor:(UIColor *)color{
// load the image
UIImage *img = [UIImage imageNamed:name];
// begin a new image context, to draw our colored image onto
UIGraphicsBeginImageContext(img.size);
// get a reference to that context we created
CGContextRef context = UIGraphicsGetCurrentContext();
// set the fill color
[color setFill];
// translate/flip the graphics context (for transforming from CG* coords to UI* coords
CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// set the blend mode to color burn, and the original image
CGContextSetBlendMode(context, kCGBlendModeColorBurn);
CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);
CGContextDrawImage(context, rect, img.CGImage);
// set a mask that matches the shape of the image, then draw (color burn) a colored rectangle
CGContextClipToMask(context, rect, img.CGImage);
CGContextAddRect(context, rect);
CGContextDrawPath(context,kCGPathFill);
// generate a new UIImage from the graphics context we drew onto
UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//return the color-burned image
return coloredImg;
}
Please check this original post for detail description.

Answer 2

I had to do exactly the same in my own app. Here is my solution : I generate a UIView which represents path's shape. In your case the path is a MKPolyline.
Here is my code :
+ (UIView *)createShapeForGPX:(GPX *)gpx
withFrameSize:(CGSize)frameSize
lineColor:(UIColor *)lineColor {
// Array of coordinates (Adapt this code with your coordinates)
// Note : in my case I have a double loops because points are in paths
// and I can have many paths for one route. So I concact all points
// into one array to simplify the code for your case. If you also have
// many paths, you have to change a little bit next code.
NSMutableArray<NSValue *> *dataPoints = [NSMutableArray new];
for (NSArray *path in gpx.paths) {
for (NSDictionary *point in path) {
double latitude = [point[#"latitude"] doubleValue];
double longitude = [point[#"longitude"] doubleValue];
[dataPoints addObject:[NSValue valueWithCGPoint:CGPointMake(longitude, latitude)]];
}
}
// Graph bounds (You need to calculate topRightCoordinate and bottomleftCoordinate. You can do it in previous for loop)
double lngBorder = gpx.topRightCoordinate.longitude - gpx.bottomLeftCoordinate.longitude;
double latBorder = gpx.topRightCoordinate.latitude - gpx.bottomLeftCoordinate.latitude;
double middleLng = gpx.bottomLeftCoordinate.longitude + (lngBorder / 2.f);
double middleLat = gpx.bottomLeftCoordinate.latitude + (latBorder / 2.f);
double boundLength = MAX(lngBorder, latBorder);
// *** Drawing ***
CGFloat margin = 4.f;
UIView *graph = [UIView new];
graph.frame = CGRectMake(0, 0, frameSize.width - margin, frameSize.height - margin);
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *linePath = [UIBezierPath bezierPath];
float xAxisMin = middleLng - (boundLength / 2.f);
float xAxisMax = middleLng + (boundLength / 2.f);
float yAxisMin = middleLat - (boundLength / 2.f);
float yAxisMax = middleLat + (boundLength / 2.f);
int i = 0;
while (i < dataPoints.count) {
CGPoint point = [dataPoints[i] CGPointValue];
float xRatio = 1.0-((xAxisMax-point.x)/(xAxisMax-xAxisMin));
float yRatio = 1.0-((yAxisMax-point.y)/(yAxisMax-yAxisMin));
float x = xRatio*(frameSize.width - margin / 2);
float y = (1.0-yRatio)*(frameSize.height - margin);
if (i == 0) {
[linePath moveToPoint:CGPointMake(x, y)];
} else {
[linePath addLineToPoint:CGPointMake(x, y)];
}
i++;
}
// Line
line.lineWidth = 0.8;
line.path = linePath.CGPath;
line.fillColor = [[UIColor clearColor] CGColor];
line.strokeColor = [lineColor CGColor];
[graph.layer addSublayer:line];
graph.backgroundColor = [UIColor clearColor];
// Final view (add margins)
UIView *finalView = [UIView new];
finalView.backgroundColor = [UIColor clearColor];
finalView.frame = CGRectMake(0, 0, frameSize.width, frameSize.height);
graph.center = CGPointMake(CGRectGetMidX(finalView.bounds), CGRectGetMidY(finalView.bounds));
[finalView addSubview:graph];
return finalView;
}
In my case GPX class contains few values :
- NSArray<NSArray<NSDictionary *> *> *paths; : contains all points of all paths. In your case I think it is your MKPolyline.
- topRightCoordinate and bottomLeftCoordinate : Two CLLocationCoordinate2D that represent top right and bottom left virtual coordinates of my path (you have to calcul them also).
You call this method like that :
UIView *shape = [YOURCLASS createShapeForGPX:gpx withFrameSize:CGSizeMake(32, 32) lineColor:[UIColor blackColor]];
This solution is based on this question how to draw a line graph in ios? Any control which will help me show graph data in ios which gives a solution to draw a graph from points.
Maybe all this code is not usefull for you (like margins) but it should help you to find your own solution.
Here is how it displays in my app (in a UITableView) :