Recent Bloggers

Ankit Prajapati
Posts: 5
Stars: 0
Date: 9/18/17
Chirag Patel
Posts: 4
Stars: 0
Date: 9/15/17
Rahul Joshi
Posts: 5
Stars: 0
Date: 9/15/17
Jiten Vaghela
Posts: 1
Stars: 0
Date: 8/23/17
Kuldeep Acharya
Posts: 1
Stars: 0
Date: 8/16/17
Saurang Suthar
Posts: 5
Stars: 0
Date: 7/5/17
Jyoti Verma
Posts: 3
Stars: 0
Date: 6/29/17
Pankti Patel
Posts: 1
Stars: 0
Date: 5/27/17
Chandrika Baraiya
Posts: 5
Stars: 0
Date: 5/27/17
Atith Patel
Posts: 5
Stars: 0
Date: 5/23/17
« Back

Custom callout view for iOS map

A callout is the view that pops up when tapping on an annotation view. By default, iOS map callout components are good enough for very limited customization. If you need more customization here are the simple steps to create custom callout on MKMapView.

 

Steps :

 

  1. Create custom annotation class

  2. Create custom callout view(xib)

  3. Create a swift CustomCalloutView class which extends UIView.

  4. Create a swift CustomMKPinAnnotationView Class which extends MKPinAnnotationView

  5. Create MapViewController(UIViewConteroller) which extends MKMapViewDelegate

Let’s go into details.

  1. Create custom annotation class

iOS map annotations are described not as a class, but as Protocol. You need to conform to the MKAnnotation protocol. An object that adopts this protocol must implement the coordinate property. The other methods of this protocol are optional.

class CustomAnnotation: NSObject, MKAnnotation {
    let placeName: String?
    let placeLocationName: String?
    let description: String?
    let coordinate: CLLocationCoordinate2D
init(placeName: String, placeLocationName: String, description:String, coordinate: CLLocationCoordinate2D) {
        self.placeName = placeName
        self.placeLocationName = placeLocationName
        self.description  = description
        self.coordinate = coordinate
        super.init()
    }
}

 

  1. Create custom callout view

Create xib file for custom callout(new file -> User Interface -> view) and design it as per your needs.

Custom callout

  1. Create a swift CustomCalloutView class which extends UIView.

Override  hitTest and pointInside in your callout view. Create outlet of labels from callout and write action method of button.

  1. Create a swift CustomMKPinAnnotationView Class which extends MKPinAnnotationView

Here you will assign values to custom callout’s labels in setSelected method.

class CustomMKPinAnnotationView: MKPinAnnotationView {
 override func setSelected(selected: Bool, animated: Bool) {
            //Set text of labels in custom callout 
 }
 override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {


 }
}

 

  1. Create MapViewController(UIViewConteroller) which extends MKMapViewDelegate

You need to add your custom annotations in iOS map from viewDidLoad method and viewForAnnotation delegate method is the one that ensures that the annotation's pin is of class CustomMKPinAnnotationView.

private let reuseIdentifier = "CustomPin"

class ViewController: UIViewController, MKMapViewDelegate {

    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
       //Add annotations 
 let customAnnotation = CustomAnnotation(name: "Surekhatech", locationName: "India", shortDescription: "One stop solution", coordinate: CLLocationCoordinate2D(latitude: latitude, longitude: longitude))
        self.mapView.addAnnotation(customAnnotation)
        self.mapView.showAnnotations([customAnnotation], animated: true)
    }

//viewForAnnotation delegate method is the one that ensures that the annotation's pin
// is of class CustomMKPinAnnotationView.
    
    func mapView(mapView: MKMapView!, viewForAnnotation annotation: MKAnnotation!) -> MKAnnotationView!  {
        let pin = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseIdentifier) ?? CustomMKPinAnnotationView(annotation: annotation, reuseIdentifier:reuseIdentifier)!
        pin.canShowCallout = false
        return pin
    }


}

 

That’s it.  Your app is reday to run.

 

Custom callout map ios

 

Comments
Dev @work
how to "Set text of labels in custom callout "???
Posted on 8/15/16 12:51 PM.
Bhargav Pavra
@Dev : Here you can load your CustomCalloutView from xib. Set your labels to desired text and add this loaded xib as the subview of CustomMKPinAnnotationView object (self) .
Posted on 9/12/16 1:21 PM.
krunal chaudhari
please add project download link
because can't understand the flow of integration
Posted on 2/13/17 10:45 AM.
h k
can you write custumcalloutview class please ? i don't understand. and please download link thank you
Posted on 2/16/17 11:44 PM in reply to Bhargav Pavra.

Contact Us

Loading

Get in touch

Headquarter :
302, Landmark,
Nr. Titanium City Center,
Prahlad Nagar Road,
Ahmedabad, India - 380015.