Question

I’m a beginner to the iOS development, and I’m trying to display an image (a map in fact) which need to be zoomable and pannable. My problem is that I don’t know how to add an overlay which will follow the pan to always represent the same location, but won’t be scaled by the zoom. There will be several overlays, and each one must be clickable.

To zoom and pan the image (map), I added my UIImageView in a UIScrollView and it works great, but I have no idea how to add this feature.

I found this thread but it is not really the same problem since his overlay is static :
UIScrollview with two images – Keeping 1 image zoomable and 1 image static (fixed size)

I’ve developped the same application in android, and to make this work I was converting a pixel of the map in screen coordinates thanks to the transformation matrix, and I overrode the onDraw method to display it, but I don’t know how to do the same on iOS, and I don’t know if this is the better solution.

Thanks for any help.

Answer 1

Ok so I found a way to do it, if it can helps anybody :

I added my overlay in the scrollView, with the background image (the map).

+CustomScrollView
----> UIImageView (map)
----> OverlayImageView (overlay)

In order to zoom, the custom scrollview need a delegate with the following methods :

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    //The background image with the map
    return mapView;
}

//When a zoom occurs, move the overlay
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    UIImageView* overlayView = [scroll.subviews objectAtIndex:1];
    float x;
    float y;
    float width;
    float height;

    //keep the width and height of the overlay
    width = overlayView.frame.size.width;
    height = overlayView.frame.size.height;
    //Move it to stay over the same pixel of the map, and centers it
    x = (self.overlay.point.x * scroll.zoomScale - width/2);
    y = (self.overlay.point.y * scroll.zoomScale - height/2);

    overlayView.frame = CGRectMake(x,y,width,height);
} 

With this, we are saying that the zoom only occurs on the background image, but as the overlay is in the UIScrollView, it pans with it. So the only thing we need to care is to move the Overlay when the zoom change, and we know it with the scrollViewDidZoom method.

To handle the touch events, we override the touchEnded:withEvent: of CustomScrollView and we forward it to the overlay if there is only one tap. I don’t show the OverlayImageView since it only override this same method (toucheEnded:withEvent:) to handle a touch on it.

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch* touch = [touches anyObject];
    // Coordinates in map view
    CGPoint point = [touch locationInView:[self.subviews objectAtIndex:0]];

    //forward
    if(touch.tapCount == 1){
        OverlayImageView* overlayView = [self.subviews objectAtIndex:1];
        CGPoint newPoint = [touch locationInView:overlayView];

        BOOL isInside = [overlayView pointInside:newPoint withEvent:event];

        if(isInside){
            [overlayView touchesEnded:touches withEvent:event];
        }
    }
    // zoom
    else if(touch.tapCount == 2){


        if(self.zoomScale == self.maximumZoomScale){
            [self setZoomScale:[self minimumZoomScale] animated:YES];
        } else {
            CGRect zoomRect = [self zoomRectForScrollView:self withScale:self.maximumZoomScale withCenter:point];            

            [self zoomToRect:zoomRect animated:YES];
            //[self setZoomScale:[self maximumZoomScale] animated:YES];
        }

        [self setNeedsDisplay];

    }
}

Hope this will help.