Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use custom icons with mapKit framework?

Tags:

ios

mapkit

I am using the MapKit framework to load google maps on my application and I place on map 4 "simulated" places like this:

- (void)viewDidLoad {

[super viewDidLoad];

mapView.delegate = self;

mapView.showsUserLocation = YES;

MKUserLocation *userLocation = mapView.userLocation;

MKCoordinateRegion region =
MKCoordinateRegionMakeWithDistance (userLocation.location.coordinate,500,500);
[mapView setRegion:region animated:NO];

//Simulated annotations on the map
CLLocationCoordinate2D poi1Coord , poi2Coord , poi3Coord , poi4Coord;
//poi1 coordinates
poi1Coord.latitude = 37.78754;
poi1Coord.longitude = -122.40718;
//poi2 coordinates
poi2Coord.latitude = 37.78615;
poi2Coord.longitude = -122.41040;
//poi3 coordinates
poi3Coord.latitude = 37.78472;
poi3Coord.longitude = -122.40516;
//poi4 coordinates
poi4Coord.latitude = 37.78866;
poi4Coord.longitude = -122.40623;

MKPointAnnotation *poi1 = [[MKPointAnnotation alloc] init];
MKPointAnnotation *poi2 = [[MKPointAnnotation alloc] init];
MKPointAnnotation *poi3 = [[MKPointAnnotation alloc] init]; 
MKPointAnnotation *poi4 = [[MKPointAnnotation alloc] init];


poi1.coordinate = poi1Coord;
poi2.coordinate = poi2Coord;
poi3.coordinate = poi3Coord;
poi4.coordinate = poi4Coord;

poi1.title = @"McDonald's";
poi1.subtitle = @"Best burgers in town";
poi2.title = @"Apple store";
poi2.subtitle = @"Iphone on sales..";
poi3.title = @"Microsoft";
poi3.subtitle = @"Microsoft's headquarters";
poi4.title = @"Post office";
poi4.subtitle = @"You got mail!";

[mapView addAnnotation:poi1];
[mapView addAnnotation:poi2];
[mapView addAnnotation:poi3];
[mapView addAnnotation:poi4];    

}

The code is fairly simple. What i want to do is instead of using the typical red pin on my google map , use my own images to show different places. Is there a simple/straightforward way to do that, cause I got much confused from the samples I already found.

like image 376
donparalias Avatar asked May 29 '12 10:05

donparalias


2 Answers

You can change the annotation image by using following code,

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>) annotation
{
    if ([[annotation title] isEqualToString:@"Current Location"]) {    
        return nil;
    }

    MKAnnotationView *annView = [[MKAnnotationView alloc ] initWithAnnotation:annotation reuseIdentifier:@"currentloc"];
    if ([[annotation title] isEqualToString:@"McDonald's"])
         annView.image = [ UIImage imageNamed:@"mcdonalds.png" ];
    else if ([[annotation title] isEqualToString:@"Apple store"])
         annView.image = [ UIImage imageNamed:@"applestore.png" ];
    else
         annView.image = [ UIImage imageNamed:@"marker.png" ];
    UIButton *infoButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];   
    [infoButton addTarget:self action:@selector(showDetailsView) 
             forControlEvents:UIControlEventTouchUpInside];
    annView.rightCalloutAccessoryView = infoButton;
    annView.canShowCallout = YES;
    return annView;
}

where "marker.png" is your image file.

like image 140
Nandha Avatar answered Oct 25 '22 01:10

Nandha


Swift 4 and 5:

    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        // Check for type here, not for the Title!!!
        guard !(annotation is MKUserLocation) else {
            // we do not want to return a custom View for the User Location
            return nil
        }
        let identifier = "Identifier for this annotation"
        let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        annotationView.image = UIImage(named: "MyMapIcon")
        annotationView.frame = CGRect(x: 0, y: 0, width: 25, height: 25)

        annotationView.canShowCallout = false
        return annotationView
    }
like image 23
Wouter Wessels Avatar answered Oct 25 '22 01:10

Wouter Wessels