Question

My goal is to use the Google Street View API to display a full pledged panorama scrollable street view image to the user. Basically the API provides me with many images where I can vary the direction, height, zoom, location etc. I can retrieve all these and hope to stitch them together and view it. The first question is, do you know any resources that demoes this full google street view demo working? Where a user can swipe around to move street view around, just like in that old iOS 5 Map Street View thing that I am sure we all miss…

If not, I will be basically downloading hundreds of photos that differ in vertical and horizontal direction. Is there a library or API or resource or method where I can stitch all these photos together to make a big panorama and make it so the user can swipe to view the big panorama on the tiny iPhone screen?

Thanks to everyone!

Answer 1

I threw together a quick implementation to do a lot of this as a demo for you. There are some excellent open source libraries out there that make an amateur version of StreetView very simple. You can check out my demo on GitHub: https://github.com/ocrickard/StreetViewDemo

You can use the heading and pitch parameters from the Google StreetView API to generate tiles. These tiles could be arranged in a UIScrollView as both Bilal and Geraud.ch suggest. However, I really like the JCTiledScrollView because it contains a pretty nice annotation system for adding pins on top of the images like Google does, and its datasource/delegate structure makes for some very straight forward image handling.

The meaty parts of my implementation follow:

- (UIImage *)tiledScrollView:(JCTiledScrollView *)scrollView imageForRow:(NSInteger)row column:(NSInteger)column scale:(NSInteger)scale
{
    float fov = 45.f / scale;

    float heading = fmodf(column*fov, 360.f);
    float pitch = (scale - row)*fov;

    if(lastRequestDate) {
        while(fabsf([lastRequestDate timeIntervalSinceNow]) < 0.1f) {
            //continue only if the time interval is greater than 0.1 seconds
        }
    }

    lastRequestDate = [NSDate date];

    int resolution = (scale > 1.f) ? 640 : 200;

    NSString *path = [NSString stringWithFormat:@"http://maps.googleapis.com/maps/api/streetview?size=%dx%d&location=40.720032,-73.988354&fov=%f&heading=%f&pitch=%f&sensor=false", resolution, resolution, fov, heading, pitch];
    NSError *error = nil;
    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:path] options:0 error:&error];
    if(error) {
        NSLog(@"Error downloading image:%@", error);
    }
    UIImage *image = [UIImage imageWithData:data];

    //Distort image using GPUImage
    {
        //This is where you should try to transform the image.  I messed around
        //with the math for awhile, and couldn't get it.  Therefore, this is left
        //as an exercise for the reader... :)

        /*
        GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:image];
        GPUImageTransformFilter *stillImageFilter = [[GPUImageTransformFilter alloc] init];
        [stillImageFilter forceProcessingAtSize:image.size];

        //This is actually based on some math, but doesn't work...
        //float xOffset = 200.f;

        //CATransform3D transform = [ViewController rectToQuad:CGRectMake(0, 0, image.size.width, image.size.height) quadTLX:-xOffset quadTLY:0 quadTRX:(image.size.width+xOffset) quadTRY:0.f quadBLX:0.f quadBLY:image.size.height quadBRX:image.size.width quadBRY:image.size.height];
        //[(GPUImageTransformFilter *)stillImageFilter setTransform3D:transform];

        //This is me playing guess and check...
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = fabsf(pitch) / 60.f * 0.3f;

        transform = CATransform3DRotate(transform, pitch*M_PI/180.f, 1.f, 0.f, 0.f);
        transform = CATransform3DScale(transform, 1.f/cosf(pitch*M_PI/180.f), sinf(pitch*M_PI/180.f) + 1.f, 1.f);
        transform = CATransform3DTranslate(transform, 0.f, 0.1f * sinf(pitch*M_PI/180.f), 0.f);

        [stillImageFilter setTransform3D:transform];


        [stillImageSource addTarget:stillImageFilter];
        [stillImageFilter prepareForImageCapture];
        [stillImageSource processImage];

        image = [stillImageFilter imageFromCurrentlyProcessedOutput];
         */
    }

    return image;
}

Now, in order to get the full 360 degree, infinite scrolling effect Google has, you would have to do some trickery in the observeValueForKeyPath method where you observe the contentOffset of the UIScrollView. I’ve started implementing this, but did not finish it. The idea is that when the user reaches either the left or right side of the view, the contentOffset property of the scrollView is pushed to the opposite side of the scrollView. If you can get the content to align properly, and you set up the contentSize just right, this should work.

Finally, I should note that the Google StreetView system has a limit of 10 images/second, so you have to throttle your requests or the IP address of the device will be blacklisted for a certain amount of time (my home internet is now blacked out from StreetView requests for the next few hours ’cause I didn’t understand this at first).