Drawing on custom MKOverlay

Question

I am using a custom MKOverlay to draw weather data over a MKMapView. The drawing is being done in CoreGraphics. For this particular case, it is not sufficient to do the drawing in the drawMapRect:zoomScale:inContext: method because of how it handles tiling. I need the image entire to be drawn at once instead of tiled like the drawMapRect method.

Before, I had the radar image in a .gif so I just added an imageView to it and resize the imageView frame in drawMapRect.

My plan was to do something similar with this. Add a custom UIView and call setNeedsDisplay on it in drawMapRect.

Here is the relevant code.

The boundingMapRect property of the MKOverlay object:

- (MKMapRect)boundingMapRect
{
    CLLocationCoordinate2D upperLeftCoord = 
    CLLocationCoordinate2DMake(weatherData.radarArray.connectedRadar.latitude + 2.5,
                           weatherData.radarArray.connectedRadar.longitude - 2.5);

    MKMapPoint upperLeft = MKMapPointForCoordinate(upperLeftCoord);

    CLLocationCoordinate2D lowerRightCoord = 
    CLLocationCoordinate2DMake(weatherData.radarArray.connectedRadar.latitude - 2.5,
                           weatherData.radarArray.connectedRadar.longitude + 2.5);

    MKMapPoint lowerRight = MKMapPointForCoordinate(lowerRightCoord);

    double width = lowerRight.x - upperLeft.x;
    double height = lowerRight.y - upperLeft.y;

    MKMapRect bounds = MKMapRectMake(upperLeft.x, upperLeft.y, width, height);

    return bounds;
}

The working drawMapRect:zoomScale:inContext: code (that is too slow).

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {

    int numPaths = parser.dataPaths.size();

    // We have to pad the map rect a lot to allow for visibility testing that works well.
    MKMapRect testMapRect = MKMapRectMake(mapRect.origin.x - 40000, mapRect.origin.y - 40000, mapRect.size.width + 40000, mapRect.size.height + 40000);;

    // Only draw inside the area we are suppose to
    //CGRect rect = [self rectForMapRect:mapRect];
    //CGContextClipToRect(context, rect);

    // How see through is the radar data. 1 = opaque, 0 = completely transparent
    CGContextSetAlpha(context, 1);
    for (int i = 0; i < numPaths; i++) {
        // Make sure the bin is actually visible in this region before drawing it
        if (MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[0]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[1]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[2]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[3])) {
            CGMutablePathRef path = CGPathCreateMutable();
            CGPoint currentP = [self pointForMapPoint:parser.dataPaths[i]->points[0]];
            CGContextBeginPath(context);
            CGPathMoveToPoint(path, NULL, currentP.x, currentP.y);
            currentP = [self pointForMapPoint:parser.dataPaths[i]->points[1]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);
            currentP = [self pointForMapPoint:parser.dataPaths[i]->points[2]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);
            currentP = [self pointForMapPoint:parser.dataPaths[i]->points[3]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);
            currentP = [self pointForMapPoint:parser.dataPaths[i]->points[0]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);
            CGPathCloseSubpath(path);
            CGContextSetFillColorWithColor(context, colors[parser.dataPaths[i]->dataVal]);
            CGContextAddPath(context, path);
            CGContextFillPath(context);
            CGPathRelease(path);
        }
}

The new drawMapRect:zoomScale:inContext: code

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {

    // We have to pad the map rect a lot to allow for visibility testing that works well.
    radarImageView.testMapRect = MKMapRectMake(mapRect.origin.x - 40000, mapRect.origin.y - 40000, mapRect.size.width + 40000, mapRect.size.height + 40000);

    radarImageView.frame = [self rectForMapRect:self.overlay.boundingMapRect];
    [radarImageView setNeedsDisplay];

}

The drawRect method of the custom UIView.

- (void)drawRect:(CGRect)rect {


    CGContextRef context = UIGraphicsGetCurrentContext();

    int numPaths = parser.dataPaths.size();

    CGContextSetAlpha(context, 1);
    for (int i = 0; i < numPaths; i++) {

        // Make sure the bin is actually visible in this region before drawing it
        if (MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[0]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[1]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[2]) ||
            MKMapRectContainsPoint(testMapRect, parser.dataPaths[i]->points[3])) {

            CGMutablePathRef path = CGPathCreateMutable();
            CGPoint currentP = [(RadarImageOverlayView *)self.superview pointForMapPoint:parser.dataPaths[i]->points[0]];

            CGContextBeginPath(context);
            CGPathMoveToPoint(path, NULL, currentP.x, currentP.y);

            currentP = [(RadarImageOverlayView *)self.superview pointForMapPoint:parser.dataPaths[i]->points[1]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);

            currentP = [(RadarImageOverlayView *)self.superview pointForMapPoint:parser.dataPaths[i]->points[2]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);

            currentP = [(RadarImageOverlayView *)self.superview pointForMapPoint:parser.dataPaths[i]->points[3]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);

            currentP = [(RadarImageOverlayView *)self.superview pointForMapPoint:parser.dataPaths[i]->points[0]];
            CGPathAddLineToPoint(path, NULL, currentP.x, currentP.y);

            CGPathCloseSubpath(path);
            CGContextSetFillColorWithColor(context, colors[parser.dataPaths[i]->dataVal]);
            CGContextAddPath(context, path);
            CGContextFillPath(context);
            CGPathRelease(path);
        }
    }
}

Thanks!

EDIT

I am thinking that the problem has something to do with the context of the RadarImageView. Is there a problem with the way I am getting the context in the drawRect: method maybe?

Answer 1

I suggest taking a look at the HazardMap sample by Apple. It has some nice examples of doing exactly what you are after.

The KMLViewer may also help out too!

Answer 2

Couldn't you prepare your path(s) before drawMapRect is called. For example when the visible region changes. You would just have to add the path to the drawing context in drawMapRect.I think maybe you could even prepare the paths for a given scale and then pan and scale the context (CGContextScaleCTM) when the region changes.

If the data don't change often. Another optimization would be to prepare images in png format for the lower zoom level as soon as you get the data. For the higher zoom level you could continue to draw like you do.

To reduce the number of iteration you could use tiling with your data: instead of having one big array with all your data, you could have one array for each tile. In a first step, you retrieve the arrays corresponding to the tile intersecting the current visible region and then you would loop only on these arrays. Of course that would only work for higher zoom level.

If you don't want to optimize, you can improve the user experience for the cases where a lot of paths are displayed. To let the user interact with the map while building the paths, you should not process all the elements in one loop. You could process 1000 paths at a time then use performSelector:afterDelay: to delay processing of the next batch. That way you can display a progress bar and let the user interact with the map.