I am trying to display custom pins on an MKMapView. These pins will have a custom image as well as a UILabel that will display a value.
I was able to successfully create the custom pin, with label. Right now the label displays a static value. I queried the data from a backend service like parse, and saved the data for each point. That way when the user taps on a certain point i can display the data in the viewController, however I am not sure how to pass this data from my query method into the didSelectAnnotation and viewForAnnotation methods.
I also would like to change the static value that the label shows to one queried from the server. I tried to do this by creating a class called CustomPointAnnotation, which inherits from MKPointAnnotation and has an initializer with three properties. these properties are set during the query, so how can I access these properties in the mapViewDidSelectAnnotationView, and the viewForAnnotation functions so that I can use the data for my needs. (for things like setting the text for a label within the viewController to a property of that specific annotation).
Below is an image that shows the viewController and what I have so far:
Here is the custom point class:
class CustomPointAnnotation: MKPointAnnotation {
var price: String!
var streetName: String!
var ratingValue: Int!
init?(price: String, streetName: String, ratingValue: Int) {
self.price = price
self.streetName = streetName
self.ratingValue = ratingValue
super.init()
}
}
Below is the query that I run in viewDidLoad:
func displayPoints() {
let pointsQuery = PFQuery(className: "testLocation")
let currentLocation = PFGeoPoint(location: locationManager.location)
pointsQuery.whereKey("location", nearGeoPoint: currentLocation, withinMiles: 2)
pointsQuery.findObjectsInBackgroundWithBlock { (points, error) -> Void in
if error == nil {
print("number of spots: \(points?.count)")
let spots = points! as [PFObject]
for pinPoint in spots {
let point = pinPoint["location"] as! PFGeoPoint
let price = String(pinPoint["price"])
let ratingValue = pinPoint["rating"] as! Int
let streetName = "Park Street, San Francisco CA"
self.customAnnotation = CustomPointAnnotation(price: price, streetName: streetName, ratingValue: ratingValue)
//// PRINT DATA OBTAINED FOR TESTING PURPOSES///////////////////////////////////////////////////////////
print(self.customAnnotation.price)
print(self.customAnnotation.streetName)
print(self.customAnnotation.ratingValue)
///////////////////////////////////////////////////////////////////////////////////////////////////////
self.customAnnotation!.coordinate = CLLocationCoordinate2DMake(point.latitude, point.longitude)
self.priceArray.append(pinPoint["price"])
self.customAnnotation!.price = pinPoint["price"] as? String
self.mapView.addAnnotation(self.customAnnotation!)
}
} else {
JSSAlertView().danger(self, title: "something went wrong", text: "error: \(error)")
}
}
}
here is the didSelectAnnotationView:
func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
//var anot: MKAnnotation
if ((view.annotation?.isKindOfClass(MKUserLocation)) != nil){
view.image = nil
}
for anot in mapView.annotations {
print(mapView.annotations.count)
let annotationView = mapView.viewForAnnotation(anot)
if (annotationView != nil) {
annotationView?.image = UIImage(named: "pin")
priceLabel.textColor = UIColor.whiteColor()
}
//priceLabel.textColor = UIColor.blueColor()
view.image = UIImage(named: "pinselected")
print("image changed")
}
}
and finally the viewForAnnotation method:
func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
if annotation.isKindOfClass(MKUserLocation){
return nil
}
if !(annotation is CustomPointAnnotation) {
print("all custom images added")
return nil
}
let reuseID = "identifier"
var annotationView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseID)
if annotationView == nil {
annotationView = CustomAnnotationView(annotation: annotation, reuseIdentifier: reuseID, price: "13" )
annotationView?.canShowCallout = false
} else {
annotationView?.annotation = annotation
}
//let cpa = annotation as! CustomPointAnnotation
//let annotationView = CustomAnnotationView(annotation: annotation, reuseIdentifier: nil, price: "11")
//annotationView!.addSubview(priceLabel)
annotationView?.annotation = annotation
annotationView?.image = UIImage(named: "pin.png")
return annotationView
}
You can down cast in swift with the as operator. In didSelectAnnotationView the annotationView has an annotation property. Your custom annotation view will have your custom annotation as its annotation property, so you can attempt to down cast it to your subclass by saying:
if let annotation = view.annotation as? CustomPointAnnotation
Assuming that's possible, you will then have access to your subclass's properties.
func mapView(mapView: MKMapView, didSelectAnnotationView view: MKAnnotationView) {
//var anot: MKAnnotation
if ((view.annotation?.isKindOfClass(MKUserLocation)) != nil){
view.image = nil
}
for anot in mapView.annotations {
print(mapView.annotations.count)
let annotationView = mapView.viewForAnnotation(anot)
if (annotationView != nil) {
annotationView?.image = UIImage(named: "pin")
priceLabel.textColor = UIColor.whiteColor()
}
//priceLabel.textColor = UIColor.blueColor()
}
view.image = UIImage(named: "pinselected")
if let annotation = view.annotation as? CustomPointAnnotation
{
self.priceLabel.text = annotation.price //for example
//update the rest of your UI
}
print("image changed")
}
Similarly in viewForAnnotation you can down cast the MKAnnotation to CustomPointAnnotation and MKAnnotationView to CustomAnnotationView.
func mapView(mapView: MKMapView, viewForAnnotation annotation: MKAnnotation) -> MKAnnotationView? {
if annotation.isKindOfClass(MKUserLocation){
return nil
}
if !(annotation is CustomPointAnnotation) {
print("all custom images added")
return nil
}
let reuseID = "identifier"
let cpa = annotation as! CustomPointAnnotation
var annotationView = mapView.dequeueReusableAnnotationViewWithIdentifier(reuseID) as! CustomAnnotationView
if annotationView == nil {
annotationView = CustomAnnotationView(annotation: cpa, reuseIdentifier: reuseID, price: cpa.price)
annotationView?.canShowCallout = false
} else {
annotationView?.annotation = cpa
annotationView?.price = cpa.price
}
annotationView?.image = UIImage(named: "pin.png")
return annotationView
}
Your CustomAnnotationView should update its price label when its price is set by implementing price's didSet.
Related
I am showing 3 distinct annotations in a map. To achive this I have a enum as a class variable which indicates the current value of the image name to be set in the MKAnnotationView property. I have subclassed MKAnnotationView to sore a class variable to get the image name in case of annotation reuse.
The problem is that when I drag the map leaving the annotations out of view and when I drag it again to see the annotations, these have their images exchanged.
My enum and custom MKAnnotationView class:
enum AnnotationIcon: String {
case taxi
case takingIcon
case destinyIcon
}
final class MyMKAnnotationView: MKAnnotationView {
var iconType: String = ""
}
And this is my viewFor annotation function:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard !(annotation is MKUserLocation) else {
return nil
}
let identifier = "Custom annotation"
var annotationView: MyMKAnnotationView?
guard let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) as? MyMKAnnotationView else {
let av = MyMKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
annotationView = av
annotationView?.annotation = annotation
annotationView?.canShowCallout = true
annotationView?.translatesAutoresizingMaskIntoConstraints = false
annotationView?.widthAnchor.constraint(equalToConstant: 35).isActive = true
annotationView?.heightAnchor.constraint(equalToConstant: 35).isActive = true
annotationView?.iconType = annotationIcon.rawValue //AnnotationIcon enum class variable
annotationView?.image = UIImage(named: annotationView?.iconType ?? "")
return av
}
annotationView = dequeuedAnnotationView
annotationView?.image = UIImage(named: annotationView?.iconType ?? "")
return annotationView
}
Images that explain the problem:
Before the draggin:
After the draggin:
What is the way for each annotation to retrieve the correct image in case of reuse?
Thank you.
Before reusing the MyMKAnnotationView you've to empty the already set image in the prepareForReuse method.
final class MyMKAnnotationView: MKAnnotationView {
var iconType: String = ""
//...
override func prepareForReuse() {
super.prepareForReuse()
image = nil // or set a default placeholder image instead
}
}
Update: As suspected the iconType is not getting set before you're trying to set the image of MyMKAnnotationView. Either you need to set the iconType before setting the image, like this:
annotationView?.iconType = AnnotationIcon.taxi.rawValue
annotationView?.image = UIImage(named: annotationView?.iconType ?? "")
You can improve this a lot by being the image returning logic to the AnnotationIcon.
enum AnnotationIcon: String {
//...
var annotationImage: UIImage? { UIImage(named: rawValue) }
}
Then change the MyMKAnnotationView as follows:
final class MyMKAnnotationView: MKAnnotationView {
var iconType = AnnotationIcon.taxi {
didSet {
image = iconType.annotationImage // image is set whenever `iconType` is set
}
}
//...
}
Then in viewForAnnotation:
var iconTypes = [AnnotationIcon]() // should be equal to the number of annotation
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
//...
dequeuedAnnotationView.annotation = annotation
dequeuedAnnotationView.iconType = iconType
}
Your problem is that you only set the iconType property when you create the annotation view. When an annotation view is reused, you set the image based on that property rather the current annotation.
Really, there is no need for the iconType property. You should just always use an icon value from your annotation. The annotation is the data model.
You also don't set the view's annotation property correctly in the case of reuse.
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard let myAnnotation = annotation as? MyAnnotation else {
return nil
}
let identifier = "Custom annotation"
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) as? MyMKAnnotationView
if annotationView == nil {
annotationView = MyMKAnnotationView(annotation: annotation, reuseIdentifier: identifier)
annotationView?.canShowCallout = true
annotationView?.translatesAutoresizingMaskIntoConstraints = false
annotationView?.widthAnchor.constraint(equalToConstant: 35).isActive = true
annotationView?.heightAnchor.constraint(equalToConstant: 35).isActive = true
}
annotationView?.annotation = MyAnnotation
annotationView?.image = UIImage(named: MyAnnotation.icon.rawValue)
return annotationView
}
I have solved this issue subclassing the MKPointAnnotation to know what type of Annotation I am reusing:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard !(annotation is MKUserLocation) else {
return nil
}
var annotationView: MKAnnotationView?
switch annotation {
case is MyCustomTaxiAnnotation:
annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationTaxiID, for: annotation)
case is MyCustomOriginAnnotation:
annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationOriginID, for: annotation)
case is MyCustomDestinyAnnotation:
annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationDestinyID, for: annotation)
default:
annotationView = nil
}
if annotationView == nil {
switch annotationIcon {
case .destinyIcon:
annotationView = MyDestinyView(annotation: annotation, reuseIdentifier: annotationDestinyID)
annotationView?.annotation = MyCustomDestinyAnnotation()
case .takingIcon:
annotationView = MyOriginView(annotation: annotation, reuseIdentifier: annotationOriginID)
annotationView?.annotation = MyCustomOriginAnnotation()
case .taxi:
annotationView = MyTaxiView(annotation: annotation, reuseIdentifier: annotationTaxiID)
annotationView?.annotation = MyCustomTaxiAnnotation()
}
} else {
annotationView?.annotation = annotation
}
return annotationView
}
For example, the Taxi annotation is a subclass of MKPointAnnotation:
let annotation = MyCustomTaxiAnnotation()
final class MyCustomTaxiAnnotation: MKPointAnnotation {
///...
}
So, taking in account that, I am able to reuse a custom annotation view properly. I have also register the custom MKAnnotationView:
map.register(MyOriginView.self, forAnnotationViewWithReuseIdentifier: annotationOriginID)
map.register(MyDestinyView.self, forAnnotationViewWithReuseIdentifier: annotationDestinyID)
map.register(MyTaxiView.self, forAnnotationViewWithReuseIdentifier: annotationTaxiID)
The default implementation of MKPointAnnotation shows titles beneath the pins, if desired:
I implemented viewFor Annotation in order to use a custom image, this eliminates MKPointAnnotation's title feature.
This code lives inside the networking code in the viewDidLoad in my MapViewController and pulls the location data from the shared instance array of location objects to create corresponding instances of my CustomAnnotation class:
// Create the annotations
var tempArray = [CustomAnnotation]()
for dictionary in Location.sharedInstance {
let lat = CLLocationDegrees(dictionary.latitude)
let long = CLLocationDegrees(dictionary.longitude)
let coordinates = CLLocationCoordinate2D(latitude: lat, longitude: long)
let name = dictionary.name
let annotation = CustomAnnotation(coordinates: coordinates, title: name)
tempArray.append(annotation)
}
// Add the annotations to the annotations array
self.mapView.removeAnnotations(self.annotationArray)
self.annotationArray = tempArray
self.mapView.addAnnotations(self.annotationArray)
}
This is my CustomAnnotation class:
class CustomAnnotation: NSObject, MKAnnotation {
var coordinate: CLLocationCoordinate2D = CLLocationCoordinate2D()
var title: String?
init(coordinates location: CLLocationCoordinate2D, title: String) {
super.init()
self.coordinate = location
self.title = title
}
}
And this is my viewFor implementation:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
// Don't want to show a custom image if the annotation is the user's location.
guard !(annotation is MKUserLocation) else {
return nil
}
let annotationIdentifier = "AnnotationIdentifier"
var annotationView: MKAnnotationView?
if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) {
annotationView = dequeuedAnnotationView
annotationView?.annotation = annotation
}
else {
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
}
if let annotationView = annotationView {
for location in Location.sharedInstance {
if annotationView.annotation?.coordinate.latitude == location.latitude && annotationView.annotation?.coordinate.longitude == location.longitude {
if location.rating < 2 {
annotationView.image = UIImage(named: "1star")
} else if location.rating == 2 {
annotationView.image = UIImage(named: "2star")
} else if location.rating == 2.5 {
annotationView.image = UIImage(named: "2star")
} else if location.rating == 3.0 {
annotationView.image = UIImage(named: "3star")
} else if location.rating == 3.5 {
annotationView.image = UIImage(named: "3star")
} else if location.rating == 4.0 {
annotationView.image = UIImage(named: "4star")
} else if location.rating == 4.5 {
annotationView.image = UIImage(named: "4star")
} else if location.rating > 4.5 {
annotationView.image = UIImage(named: "5star")
}
}
}
}
return annotationView
}
Is there a simple way of porting MKPointAnnotation's title format or do I have to make a custom view? Perhaps as importantly, is it safe to assume I would need to write some logic to prevent titles from closely located pins from being a jumble of text? Apple's MKPointAnnotation seems to have this logic built in, in that it just declines to show many titles.
This what I'm trying to do:
Use a single custom annotation for all the locations that will populate the map. I have the custom image saved in the assets but, can't make it work.
My code is as follows:
ViewDidLoad()
if let locationDict = snap.value as? Dictionary<String, AnyObject> {
let lat = locationDict["LATITUDE"] as! CLLocationDegrees
let long = locationDict["LONGITUDE"] as! CLLocationDegrees
let title = locationDict["NAME"] as! String
let center = CLLocationCoordinate2D(latitude: lat, longitude: long)
_ = MKCoordinateRegion(center: center, span: MKCoordinateSpan(latitudeDelta: 0.10, longitudeDelta: 0.10))
let annotation = MKPointAnnotation()
annotation.coordinate = CLLocationCoordinate2DMake(lat, long)
annotation.title = title.capitalized // if you need title, add this line
self.mapView.addAnnotation(annotation)
}
Use a single custom annotation for all the locations that will populate the map. I have the custom image saved in the assets but, can't make it work (Details in the viewDidLoad)
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
var annotationView: MKAnnotationView?
if annotation.isKind(of: MKUserLocation.self) {
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "User")
annotationView?.image = UIImage(named: "icon")
}
return annotationView
}
You should implement delegate method:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
if annotation.isKind(of: MKUserLocation.self) {
let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "User")
annotationView.image = UIImage(named: "icon")
return annotationView
}
let reuseId = "Image"
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseId)
if annotationView == nil {
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseId)
annotationView?.canShowCallout = true
annotationView?.image = UIImage(named: "<<image name>>")
}
else {
annotationView?.annotation = annotation
}
return annotationView
}
You should implement delegate method like this.
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
if annotation is MKUserLocation {
return nil
}
var pinView : MKAnnotationView? = nil
let identifer = "pin"
pinView = mapView .dequeueReusableAnnotationView(withIdentifier: identifer)
if pinView == nil {
pinView = MKAnnotationView.init(annotation: annotation, reuseIdentifier: identifer)
}
pinView?.canShowCallout = true
pinView?.calloutOffset = CGPoint(x: -5, y: 5)
pinView?.rightCalloutAccessoryView = UIButton.init(type: .detailDisclosure) as UIView
let type = (annotation as! CustomAnnotation).type
if type == -1 {
pinView?.image = UIImage(named: "Img_gray_pin")?.resized(toWidth: 20)
} else if type == 0 {
pinView?.image = UIImage(named: "Img_gray_pin")?.resized(toWidth: 20)
} else if type == 1{
pinView?.image = UIImage(named: "Img_blue_pin")?.resized(toWidth: 20)
} else if type == 2 {
pinView?.image = UIImage(named: "Img_orange_pin")?.resized(toWidth: 25)
} else if type == 3 {
pinView?.image = UIImage(named: "Img_red_pin")?.resized(toWidth: 30)
} else {
pinView?.image = UIImage(named: "Img_gray_pin")?.resized(toWidth: 20)
}
return pinView
}
And then create CustomAnnotation Class
import MapKit
import UIKit
class CustomAnnotation: NSObject, MKAnnotation {
let title: String?
let subtitle: String?
let coordinate: CLLocationCoordinate2D
let tag : Int
let type : Int
init(title: String, address: String, coordinate: CLLocationCoordinate2D, tag : Int, type : Int) {
self.title = title
self.subtitle = address
self.coordinate = coordinate
self.tag = tag
self.type = type
super.init()
}
}
I am trying to make a lot different type of annotation. All annotation need to customize for the beautiful reason.
I know that it need to use viewFor Annotation, but how can I know what kind of the annotation?
func addZoneAnnotation() {
let zoneLocations = ZoneData.fetchZoneLocation(inManageobjectcontext: managedObjectContext!)
for zoneLocation in zoneLocations! {
let zoneCoordinate: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: Double(zoneLocation["latitude"]!)!, longitude: Double(zoneLocation["longitude"]!)!)
let zoneAnnotation = MKPointAnnotation()
zoneAnnotation.coordinate = zoneCoordinate
map.addAnnotation(zoneAnnotation)
}
}
Subclass MKPointAnnotation to add whatever property that you want:
class MyPointAnnotation : MKPointAnnotation {
var identifier: String?
}
Then you can use it as follow:
func addZoneAnnotation() {
let zoneLocations = ZoneData.fetchZoneLocation(inManageobjectcontext: managedObjectContext!)
for zoneLocation in zoneLocations! {
let zoneCoordinate: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: Double(zoneLocation["latitude"]!)!, longitude: Double(zoneLocation["longitude"]!)!)
let zoneAnnotation = MyPointAnnotation()
zoneAnnotation.coordinate = zoneCoordinate
zoneAnnotation.identifier = "an identifier"
map.addAnnotation(zoneAnnotation)
}
}
And finally when you need to access it:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
guard let annotation = annotation as? MyPointAnnotation else {
return nil
}
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "reuseIdentifier")
if annotationView == nil {
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "reuseIdentifier")
} else {
annotationView?.annotation = annotation
}
// Now you can identify your point annotation
if annotation.identifier == "an identifier" {
// do something
}
return annotationView
}
Is there a way to parse an array of information to the next VC when the users tap the rightCalloutAccessoryView?
Lets say I have this set of information that I need to parse over:
[name: "XXX",gender: "YYY",lat: 11.1111,lon: 22.2222]
and in the next VC we will display these info in a 'profile page' manner. My implementation thus far is as such:
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
let reuseIdentifier = "pin"
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier)
if annotationView == nil {
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: reuseIdentifier)
annotationView?.canShowCallout = true
annotationView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
} else {
annotationView?.annotation = annotation
}
annotationView?.image = UIImage(named: "PersonIcon")
return annotationView
}
func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
if control == view.rightCalloutAccessoryView {
viewActivity()
}
}
func viewActivity() {
let controller = storyboard?.instantiateViewController(withIdentifier: "ActivityView") as! ActivityViewController
controller.parsedInfo = /*parsedInfo*/
navigationController?.pushViewController(controller, animated: true)
}
EDIT:
Code for addAnnotation in viewDidLoad:
FIRHelperClient.sharedInstance.getLocationsForActivities(ref) { (results, error) in
if let error = error {
print(error.localizedDescription)
} else {
for result in results! {
guard let lat = result.lat, let lon = result.lon, let activity = result.searchActivities else {
print("locationForActivities did not return lat or lon")
return
}
let annotation = MKPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: lat, longitude: lon)
annotation.title = activity
self.mapView.addAnnotation(annotation)
}
}
}