"mini-map" in UITableView

Question

How can I add a "mini-map" in my UITableViewController?

I would like to use the same "design/layout" as with Maps app. Please see:

enter image description here

Have a look to this answer [add an image to grouped uitableview section header?](http://stackoverflow.com/questions/2068878/iphone-add-an-image-to-grouped-uitableview-section-header/2068978#2068978) — Ahmad Kayyali, May 15 '11 at 20:57
Thanks, but that doesn't explain the border around the map. My first guess would be that the map is a UIButton with the map as view, but as far as I can recall, the MKMapView is not a subclass of UIView and therefore cannot be set as the subview of an UIButton... right? — Paul Peelen, May 15 '11 at 21:00
`The map is a UIButton with the map as view` that seem more possible, you are right — Ahmad Kayyali, May 15 '11 at 21:01
@paul-peelen Check out my answer for you how you could have this as a subview of a button. — RedBlueThing, May 16 '11 at 01:44

score 10 · Answer 1 · edited Jan 29 '14 at 10:21

You might consider, rather than having a fully functional MKMapView in your UI, use the Google Static Maps API. You can just format a URL with the appropriate location and get back an image asynchronously. You can stick the results in a UIImageView:

http://maps.google.com/maps/api/staticmap?center=kakn%C3%A4stornet&size=88x88&maptype=roadmap&sensor=false

Just make sure you cache the results, so you aren't hitting Google servers every time someone runs your app.

Here is a URL with a marker included:

http://maps.google.com/maps/api/staticmap?center=kakn%C3%A4stornet&size=88x88&maptype=roadmap&markers=size:tiny|color:green|kakn%C3%A4stornet&sensor=false

enter image description here

Niceone, didn't know about that. Can one add an annotation pin to it? — Paul Peelen, May 16 '11 at 09:17

score 4 · Answer 2 · answered May 15 '11 at 21:41

I figured it out, or at least almost. Thanks to @AhmadTK.

This is my code:

#import <MapKit/MapKit.h>
#import "RackAnnotation.h"

#import <QuartzCore/CATransaction.h>
#import <QuartzCore/CAAnimation.h>

[...]

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.section == 0)
    {
        static NSString *CellIdentifier = @"Cell";

        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        }

        [cell.textLabel setText:theAnnotationSet._address];

        [cell.textLabel setShadowColor:[UIColor whiteColor]];
        [cell.textLabel setShadowOffset:CGSizeMake(0, 1)];

        MKMapView *mapView=[[MKMapView alloc] initWithFrame:CGRectMake(1, 1, 68, 68)];
        mapView.mapType=MKMapTypeStandard;
        mapView.showsUserLocation=NO;
        [mapView setContentMode:UIViewContentModeBottomRight];

        MKCoordinateRegion region;
        region.center=theAnnotationSet._coordinate;

        MKCoordinateSpan span;
        span.latitudeDelta = 0.01;
        span.longitudeDelta = 0.01;
        region.span=span;

        [mapView setRegion:region animated:NO];
        [mapView addAnnotation:theAnnotationSet];
        [mapView setScrollEnabled:NO];
        [mapView setUserInteractionEnabled:NO];

        UIButton *mapButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 70, 70)];
        [mapButton setBackgroundColor:[UIColor grayColor]];

        CALayer *mapLayer = mapView.layer;
        mapLayer.masksToBounds = YES;
        mapLayer.cornerRadius = 10.0;

        [mapButton addSubview:mapView];
        [mapButton setContentEdgeInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

        CALayer *layer = mapButton.layer;
        layer.masksToBounds = YES;
        layer.cornerRadius = 10.0;

        [cell addSubview:mapButton];
        [cell setAccessoryView:mapButton];
        [cell setEditing:YES];

        NSLog(@"Title: %@", theAnnotationSet._address);

        return cell;

    }
    else {
        static NSString *CellIdentifier = @"Cell";

        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        }


        return cell;
    }
}

And this is the result:

enter image description here

The only problem I have left is getting it on the left side. As far as I can see that can only be done by using your own subclass and either UITableViewCell or set your own view as header.

The other thing I have left to figure out is how to remove "Googl" in this mini-map. I mean, I have it in the main map and now its just annoying me.

Cheers, Paul Peelen

If you plan to submit this to the app store, don't remove the Googl from the map. It's required by the license agreement that it not be obscured. You might even get dinged for not showing the whole name. — Rayfleck, May 15 '11 at 21:50
Yes, I thought so. Read it in the agreement. But I figured since google themselfs don't show it on the details page and since it represents a position on the map that has been selected on a large map which does contain "Google" I thought they might approve it anyways. But, how would I remove it? — Paul Peelen, May 15 '11 at 21:55
Sorry, I don't know how to remove it; I found out all this because I wanted to put a button on the lower left corner of a map, and it covered "Google". — Rayfleck, May 15 '11 at 21:59
I understand. I might just expand it a litte bit. I updated my app now with an own UITableViewCell with the button on the left side. Cheated a bit and did most of it in IB.. ;) — Paul Peelen, May 15 '11 at 22:06
You could probably make the map view's frame bigger and clip it by putting it as a subview inside another (smaller) view. — Alexsander Akers, Sep 25 '11 at 16:26
@PaulPeelen Checkout the static map approach I posted. The google logo comes back scaled for static map image requests. — RedBlueThing, Feb 24 '13 at 01:24

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

I believe your example in the question is achieved with UITableView header view. Try dragging a UIView to you UITableView Controller, and customize that UIView. It should be much easier than modifying a TableViewCell.

Reference:

UITableView Header (not section header) problem

edited May 23 '17 at 12:19

Community

1
1

answered May 16 '11 at 02:31

Xiao

873
6
10

Well, my UITableViewController is done by code, not with IB. So I can't drag it. I solved it now creating a custom UITableViewCell wich has a UIButton and a UILabel (almost as you suggested). – Paul Peelen May 16 '11 at 09:16
@Paul Peelen You can also add a new UIView to the Controller with only code. – Xiao May 16 '11 at 09:49

"mini-map" in UITableView

3 Answers3