derdida derdida - 2 years ago 324
iOS Question

MapBox iOS different marker images?

Is there a way to add an ID or something, that i am able to set custom marker images?

I have multiple markers with numbers, and i need that every new marker has another image.

For example:

marker1 - marker_1_image

marker2 - marker_2_image

Atm i am only able to set 1 image (globaly) to all markers:

func mapView(mapView: MGLMapView, imageForAnnotation annotation: MGLAnnotation) -> MGLAnnotationImage? {

var annotationImage = mapView.dequeueReusableAnnotationImageWithIdentifier("place")

if annotationImage == nil {
var image = UIImage(named: "marker_1")!
image = image.imageWithAlignmentRectInsets(UIEdgeInsetsMake(0, 0, image.size.height/2, 0))
annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: "place")

return annotationImage

Any ideas? Or can i subclass MGLAnnotation and use that for all delegate methods?

Answer Source

You could subclass and add a userInfo property (as in this answer), or you could use the existing title/subtitle properties:

func mapView(mapView: MGLMapView, imageForAnnotation annotation: MGLAnnotation) -> MGLAnnotationImage? {
    // get the custom reuse identifier for this annotation
    let reuseIdentifier = reuseIdentifierForAnnotation(annotation)
    // try to reuse an existing annotation image, if it exists
    var annotationImage = mapView.dequeueReusableAnnotationImageWithIdentifier(reuseIdentifier)

    // if the annotation image hasn‘t been used yet, initialize it here with the reuse identifier
    if annotationImage == nil {
        // lookup the image for this annotation
        let image = imageForAnnotation(annotation)
        annotationImage = MGLAnnotationImage(image: image, reuseIdentifier: reuseIdentifier)

    return annotationImage

// create a reuse identifier string by concatenating the annotation coordinate, title, subtitle
func reuseIdentifierForAnnotation(annotation: MGLAnnotation) -> String {
    var reuseIdentifier = "\(annotation.coordinate.latitude),\(annotation.coordinate.longitude)"
    if let title = annotation.title where title != nil {
        reuseIdentifier += title!
    if let subtitle = annotation.subtitle where subtitle != nil {
        reuseIdentifier += subtitle!
    return reuseIdentifier

// lookup the image to load by switching on the annotation's title string
func imageForAnnotation(annotation: MGLAnnotation) -> UIImage {
    var imageName = ""
    if let title = annotation.title where title != nil {
        switch title! {
        case "blah":
            imageName = "blahImage"
            imageName = "defaultImage"
    // ... etc.
    return UIImage(named: imageName)!

You’ll want to make the image loading more robust and customize the specificity of the reuse identifier string, but this should generally work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download