MapBox add interactive annotation/view at location iOS

Question

I am trying to implement MapBox maps,special reason for using it, it is highly customizable, I need to create a different kind of map with all different colors, I got that working perfectly fine.

The problem I want to add annotation on map that should interactive from within, normally an annotation is interactive by just tapping on it, it works, I need something like a UIButton in the annotation and clicking on the Button action should perform.

Question How to create an annotation with a button/view in MapBox, how should I approach.

Any help is appreciated.

Thanks.

Edit:

To Be more precise I want something like the image below for annotation..

Answer 1

I am able to get this working finally. I have created a Subclassed RMMarker class in MapBox Project and I am adding all the components as CALayer, adding components in UIView then adding UIView.layer doesn't work. You have to add sublayers in the UIView layer.

Then I have created come custom delegates to handle the touch events.

Make sure you use MapBox from here and add MyMarker inside the MapBox project as a component.

I am adding my code here

MyMarker.h

#import "RMMarker.h"

@interface MyMarker : RMMarker 
@end 

MyMarker.m

@implementation MyMarker 
-(id)init{ 

    self=[super init]; 

    if(self){ 


       UIView *subLayer=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 126, 91)];



       UIView *smallView=[[UIView alloc] initWithFrame:CGRectMake(36.0, 0, 88, 91)];

       //smallView.contents=(id)image;

       [subLayer.layer addSublayer:smallView.layer]; 

       subLayer.backgroundColor=[UIColor blueColor]; 

       subLayer.layer.name=@"Annotation"; 

       [self addSublayer:smallView.layer]; 


        float y=11.0; 
        float x=12.0; 

        for(int i=0;i<4;i++){ 
           CGPoint pt=CGPointMake(x, y); 
           UIView *handle=[self createHandle:@"Handle" fromPos:pt]; 
           y=y+14.0; 
           handle.layer.name=[NSString stringWithFormat:@"Handle at %@",NSStringFromCGPoint(pt)]; 
           [self addSublayer:handle.layer]; 
      } 
   } 

   return self; 
}

-(UIView *)createHandle:(NSString *)handle fromPos:(CGPoint)pos{

    UIView *view=[[UIView alloc] initWithFrame:CGRectMake(pos.x, pos.y, 60.0, 5.0)]; 

    view.backgroundColor=[UIColor brownColor]; 


    return view; 


} 
@end

RMMapViewDelegate.h

- (void)tapOnMarker:(MyMarker *)marker at:(CGPoint )pt;

RMMapView.m

Added BOOL _delegateHasMyMarkerDelegate;

Setup Delegate method properties

- (void)setDelegate:(id <RMMapViewDelegate>)aDelegate{ 
     _delegateHasMyMarkerDelegate=[_delegate respondsToSelector:@selector(tapOnMarker:at:)]; 
}

- (void)tapOnMarker:(MyMarker *)marker at:(CGPoint)aPoint 
{ 
    if (_delegateHasMyMarkerDelegate) 
   { 
        [_delegate tapOnMarker:marker at:aPoint]; 
   } 

}

- (void)handleSingleTap:(UIGestureRecognizer *)recognizer{ 
    //Default initializers

     CALayer *superlayer = [hit superlayer];

    // See if tap was on an annotation layer or marker label and send delegate protocol method 
   //Added conditions for MyMarker touch events 
    if ([superlayer superlayer] != nil && [[superlayer superlayer] isKindOfClass:[MyMarker class]]){ 

         [self tapOnMarker:((MyMarker *)[superlayer superlayer]) at:[recognizer locationInView:self]]; 

}else if ([[superlayer superlayer] superlayer] != nil && [[[superlayer superlayer] superlayer] isKindOfClass:[MyMarker class]]){ 

        [self tapOnMarker:((MyMarker *)[[superlayer superlayer] superlayer]) at:[recognizer locationInView:self]]; 

}else if (superlayer != nil && [superlayer isKindOfClass:[MyMarker class]]){ 

        [self tapOnMarker:((MyMarker *)superlayer) at:[recognizer locationInView:self]]; 

   }

}

Implementation

-(RMMapLayer *)mapView:(RMMapView *)mapView layerForAnnotation:(RMAnnotation *)annotation{

     if(annotation.isUserLocationAnnotation) 
         return nil;

    MyMarker *marker=[[MyMarker alloc] init]; 
    [marker setFrame:CGRectMake(0, 0, 126, 91)]; 


     return marker;

}

#pragma mark MyMarker Delegate

-(void)tapOnMarker:(MyMarker *)marker at:(CGPoint)pt{ 

    for (CALayer *layer in marker.sublayers) { 
        CGPoint convertedPt=[[marker superlayer] convertPoint:pt toLayer:layer]; 
        if([layer containsPoint:convertedPt]){ 
             NSLog(@"%@ selected",layer.name); 
        } 

    }

}

Hope it helps someone, who want to create Marker/Annotation and want multiple actions over it.

Answer 2

Why not simply use - (void) singleTapOnMap:(RMMapView *)map at:(CGPoint)point delegate? I don't see you use any button states, so seems to me the easiest way is:

func singleTapOnMap(map: RMMapView!, at point: CGPoint) {
        let layer = someObject.layer
        let frameOnScreen = layer.superlayer.convertRect(layer.frame, toLayer: map.layer)

        if CGRectContainsPoint(frameOnScreen, point) {
            NSLog("hit")
        }
    }