Once you have loaded your spots in any kind of way we described in the Load spots guide, you are now ready to show them on a MKMapView.

MKMapView setup

First, implement a MKMapView and set the delegate to self. This delegate will allow you to handle your annotion design and the annotation click action later.

mapView.delegate = self

Custom MKAnnotation

When you finished the MKMapView setup, its time to add annotations to your mapView. To combine a XMMSpot with MKAnnotation you will have to create a custom class which inherit from MKAnnotation. In your custom annotation init function you have to set the location with the spots latitude and longitude.

init(spot: XMMSpot) {
   coordinate = CLLocationCoordinate2D.init(latitude: spot.latitude,
                                             longitude: spot.longitude)    
}

See CustomAnnotation of our Demo App for more details.

Show Annotations

Now its time to add the custom annotation to your mapView. You have to create your custom annotation with the loaded spots like this.

var annotations: [MKAnnotation] = []
for spot in spots {
   annotations.append(CustomAnnotation(spot: spot))
}
self.mapView.addAnnotations(annotations)  

Finally add them to your mapView.

Annotation Design

The annotation design customization will be done in the mapView(_ mapView, viewFor annotation:) function of MKMapViewDelegate. Here you can set a MKAnnotationView for setting your own style for the MKAnnotation.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
   if annotation.isKind(of: CustomAnnotation.self) {
      let mapAnnotation = annotation as! CustomAnnotation
      let annotationView = MKAnnotationView.init(annotation: mapAnnotation,
                                                 reuseIdentifier: mapAnnotation.identifier)
      
      annotationView.isEnabled = true
      annotationView.canShowCallout = true
      annotationView.image = annotationImage
      
      return annotationView
    }
    
    return nil
  }

First, check if the the annotation is kind of your custom annotation class. After that initialize the MKAnnotationView and set your custom properties and your custom image.

Annotation selection

To handle click events on your annotation, you have to implement mapView(_ mapView:, didSelect view:) of the MKMapViewDelegate.

Related sources

• CustomAnnotation
• MapViewController
• MKMapView