iOS overlays drawing issues (cropped image, disappearing on zoom in/out)

[Slympp]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.59.3
react: 16.8.3
react-native-maps: 0.23.0

iOS - 12.2 Simulator/iPhone 6, AppleMaps

Steps to Reproduce

1. Add an Overlay to the map
2. Zoom in/zoom out

Expected Behavior

Overlay in Maps should be visible all the time without any changes based on zoom.

Actual Behavior

Zoom in/out : https://www.youtube.com/watch?v=A3wf40oubeA

Cropped overlay :

Reproducible Demo

https://snack.expo.io/rJyS_AOYN

I tried to dig a bit in the implementation but my Objective-C knowledges are close to none. Despite, I think from my tests that the drawMapRect() delegate function in lib/ios/AirMaps/AIRMapOverlayRenderer.m is not called when it should be.

Could it be a MapKit issue ? I successfully did a small repro on an empty native project with MapKit's Swift version and it was working great, but it doesn't really mean anything. Could it come from a lack of implementation of the zoomScale:(MKZoomScale) parameter in the Air component ?

Sorry for the possibly duplicate, I tried many fixes suggested in related issues (#2135, #2776, ...) and none of them worked 😞

[bargald]

are the owners of the package aware of this bug?

[tristanwagner]

This bug is a year and a half old and there is already lots of issues referring to this particular problem.

I think it was introduced with the actual < Overlay /> feature in this PR https://github.com/react-native-community/react-native-maps/pull/2022 I'm trying to take a look at it in my spare time but my Objective C knowledge is very limited.

@smellman @rborn please help 😢

[bvelasquez]

Any updates on this issue?

[bvelasquez]

I modified drawMapRect in AirMapOverlayRenderer.m to display gray rectangle fill for each mapRect sent to it. I also set the color to light red to show the bounding Rect of my image.

The mapRect area is not consistent with the orientation of the map. I would expect it to try to update more vertical space than horizontal, but it seems to want to update the wrong area of the map, leaving the top and bottom not drawing or updating and clipping anything below the gray area.

You can see in the images I've attached that the image gets clipped where the gray area stops, even though the image extends beyond that area.

Any thoughts on why MapKit is doing this, and what I could be doing wrong to cause this. I would expect the gray area to extend beyond the top and bottom of the map, and MapKit to want to update those areas when the zoomScale changes.

If I zoom out far enough, the gray area grows much larger and there is no clipping of my overlay image. As I zoom in closer, the gray area shrinks and eventually the overlay image is clipped when it shrinks small enough.

- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
    UIImage *image = [(AIRMapOverlay *)self.overlay overlayImage];
    CGImageRef imageReference = image.CGImage;

    MKMapRect theMapRect = self.overlay.boundingMapRect;
    CGRect theRect = [self rectForMapRect:theMapRect];

    CGRect drawRect = [self rectForMapRect:mapRect];

    // Draw the mapRect passed into drawMapRect, which is the area that MapKit says needs updating.
    UIColor * color = [[UIColor alloc] initWithRed:0.5 green:0.5 blue:0.5 alpha:0.5];
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, drawRect);

    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, 0.0);

    UIColor * color2 = [[UIColor alloc] initWithRed:0.5 green:0.2 blue:0.1 alpha:0.5];
    CGContextSetFillColorWithColor(context, [color2 CGColor]);
    CGContextFillRect(context, theRect);

    CGContextDrawImage(context, theRect, imageReference);
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.