Mapbox-gl-native: iOS - Pass custom data through annotation points

[YBthebest]

Hi,

if I remember correctly in the MapBox v1 there was a "userInfo" variable we could use to pass custom data through annotation points. I haven't found a similar capability in the current versions.
I am only able to set the coordinates, title and subtitle of an annotation, but I would like to pass other custom data I need to process the callout click for instance.
Shouldn't this be an important feature here too?

Thanks !

[Dwar3xwar]

Make your own custom model object that conforms to MGLAnnotation.

[1ec5]

A custom MGLAnnotation implementation is the way to go.

[davidm49090]

Can you post an example of this? Seriously. The legacy SDK had better examples to follow.

[1ec5]

Here’s what your custom MGLAnnotation implementation might look like in Objective-C:

// Or @interface MyPointAnnotation : NSObject <MGLAnnotation>
@interface MyPointAnnotation : MGLPointAnnotation

@property (nonatomic, strong, nullable) UIImage *flagImage;

@end

@implementation MyPointAnnotation
@end

Then, use MyPointAnnotation like this:

MyPointAnnotation *point = [[MyPointAnnotation alloc] init];
point.coordinate = CLLocationCoordinate2DMake(0, 0);
point.flagImage = nullIslandFlagImage;
[mapView addAnnotation:point];

Or in Swift:

// Or class MyPointAnnotation: NSObject, MGLAnnotation
class MyPointAnnotation: MGLPointAnnotation {
    var flagImage: UIImage?
}

let point = MyPointAnnotation()
point.coordinate = CLLocationCoordinate2D(latitude: 0, longitude: 0)
point.flagImage = nullIslandFlagImage
mapView.addAnnotation(point)

Hope this helps!

[davidm49090]

Wait. Shouldn't point.flag = nullIslandFlagImage be point.flagImage = nullIslandFlagImage

[1ec5]

Yes – fixed. That’s what I get for typing on a phone! 😬

[davidm49090]

Awesome. At some point, can you update the docs on the website to reflect this? I would think that most people would want the annotations to do something like open a URL, but at least for me it wasn't obvious on how to store the annotation ID.

[1ec5]

Yes, we’ll update the website to include this example too. Thanks for the suggestion!

[davidm49090]

Ok. I get how to create the custom annotation, but how should we handle the annotation callout for the custom type?

[1ec5]

Let’s say you want to display the flag image to the left of the title and subtitle. Your MGLMapViewDelegate implementation would implement this method:

- (nullable UIView *)mapView:(nonnull MGLMapView *)mapView
    leftCalloutAccessoryViewForAnnotation:(nonnull id<MGLAnnotation>)annotation {
    if ([annotation isKindOfClass:[MyPointAnnotation class]]) {
        UIImage *flagImage = [(MyPointAnnotation *)annotation flagImage];
        if (flagImage) {
            return [[UIImageView alloc] initWithImage:flagImage];
        }
    }
    return nil;
}

func mapView(mapView: MGLMapView, leftCalloutAccessoryViewForAnnotation annotation: MGLAnnotation) -> UIView? {
    if let annotation = annotation as? MyPointAnnotation, flagImage = annotation.flagImage {
        return UIImageView(image: flagImage)
    }
    return nil
}

See the API reference for a few more callout view customization options. If you need something more sophisticated, here’s a lengthy example for making a completely custom callout view. We’re planning to streamline callout view customization in #4392.

[friedbunny]

We've added an example of how to implement the MGLAnnotation protocol and how to subclass the existing annotation classes.

[davidm49090]

Thank you for uploading the example! To round it out, could you add some code that handles interactivity for the callout, such as to launch a new window with a URL related to the annotation?

[friedbunny]

@davidm49090 The callout delegate usage example sounds like what you’re after.

[davidm49090]

In a way, yes. However, it would be great if you could incorporate it with the annotation models example because I believe this is how most people would use it in the real world: to read a custom property of an annotation and take an action with that property as a parameter.

For future iOS Mapbox examples, it would be great if you could use sets or arrays of annotations. I presume most people are generating more than one annotation at a time, but it isn't always clear what the best design patterns are for 10 locations (that are a product of a search function and dynamic at runtime) as opposed to a single one that's hardcoded.

[ItsMeMIHIR]

@1ec5 i create class run it ok good.
but now i want click action and get that MGLPointAnnotation view value from my class

[1ec5]

@ItsMeMIHIR, if you’re looking to access custom data associated with an annotation when the annotation is selected, take a look at our annotation model example.