add UIButton as subview of UIWebView and resize it when zoom

Question

I have the image of the World map in .svg that i load into UIWebView. (I used svg format and UIWebView because the image is too big to load into UIImageView)

I would like to put a bunch of Pin on this map with fixed position.

For example if I put a pin in Brazil, this pin must always remain on Brazil, no matter if I scroll or zoom the UIWebView

how you can do this? for now the scroll is not a problem but only the zoom

NSString *path = [[NSBundle mainBundle] pathForResource:@"map" ofType:@"svg"];

NSURL *url=[[NSURL alloc] initFileURLWithPath:path];
NSURLRequest *request=[[NSURLRequest alloc]initWithURL:url];
[_webView loadRequest:request];
_webView.scalesPageToFit = YES;
_webView.delegate = self;

UIButton *but = [[UIButton alloc] initWithFrame:CGRectMake(100, 400, 30, 30)];
[but setBackgroundColor:[UIColor blackColor]];
[_webView.scrollView addSubview:but];

EDIT as suggested by @dymv using the delegate methods of ScrollView, we can change the size of the buttons but there are problems:

how to reuse this code with many buttons?

EDIT2:

I solved the problem relative to many buttons, but now it seems that I can not put the pin fixed on the same point.

obviously the coordinates of the pin change depending on the zoom, but the problem is that visually pin moves too much to where it should be.

For example as above if I put a pin on the coast of Brazil, when I zoom out, the pin goes over the ocean, and does not remain on the coast. This is really a problem as with so many pins, the end result would be really bad

-(void)webViewDidFinishLoad:(UIWebView *)webView {

    CGPoint primo = CGPointMake(100, 100);       

    for (int i = 0; i<36; i++) {

        UIButton *bu = [[UIButton alloc] initWithFrame:CGRectMake(primo.x, primo.y, 10, 18)];
        [bu setBackgroundImage:[UIImage imageNamed:@"pin"] forState:UIControlStateNormal];
        [bu addTarget:self action:@selector(buttonTouch:) forControlEvents:UIControlEventTouchUpInside];
        [_webView.scrollView addSubview:bu];
        bu.tag = i;

        [arrayOfPoint addObject:[NSValue valueWithCGPoint:bu.center]];
        [arrayOfRect addObject:[NSValue valueWithCGRect:bu.frame]];

        primo.x = primo.x + 20;
        primo.y = primo.y + 10;
    }
}


-(void)scrollViewDidZoom:(UIScrollView *)scrollView {

    CGFloat scale = scrollView.zoomScale; 

    for (UIView *button in scrollView.subviews) {

      if ([button isMemberOfClass:[UIButton class]]) {

        int i = button.tag;

        NSValue *newValue = [arrayOfRect objectAtIndex:i];
        CGRect newFrame = [newValue CGRectValue];

        button.frame = CGRectMake(CGRectGetMinX(newFrame) * scale,
                                  CGRectGetMinY(newFrame) * scale,
                                  CGRectGetWidth(newFrame),
                                  CGRectGetHeight(newFrame));

      }
   }
}

-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {

  for (UIView *button in scrollView.subviews) {

    if ([button isKindOfClass:[UIButton class]]) {

        int tag = button.tag;
        CGRect rectPre = button.frame;
        [arrayOfRect replaceObjectAtIndex:tag withObject:[NSValue valueWithCGRect:rectPre]];

     }
   }
}

SOLVED:

to solve the problem of positioning was enough to change this method:

-(void)scrollViewDidZoom:(UIScrollView *)scrollView {

    CGFloat scale = scrollView.zoomScale; 

    for (UIView *button in scrollView.subviews) {

      if ([button isMemberOfClass:[UIButton class]]) {

        int i = button.tag;

        NSValue *newValue = [arrayOfRect objectAtIndex:i];
        CGRect newFrame = [newValue CGRectValue];

        button.frame = CGRectMake(CGRectGetMinX(newFrame) * scale,
                                  CGRectGetMinY(newFrame) * scale,
                                  CGRectGetWidth(newFrame) * scale, //add *scale
                                  CGRectGetHeight(newFrame) * scale); // add *scale

      }
   }
}

Answer 1

If you're targeting iOS 5 and higher you can access scrollView property from UIWebView instance and become its delegate.

We are interested in scrollView:zoom* methods. Basic idea is:

1) On -scrollViewDidZoom: you're positioning the button according to scrollView.zoomScale with taking into account currentButtonFrame;

2) On -scrollViewDidEndZooming:withView:atScale: you're updating currentButtonFrame.

Check sample project here.