MapBox add interactive annotation / view in iOS location

Question

I'm trying to implement MapBox cards, a special reason for using it, it is very customizable, I need to create another map with different colors, I got this work perfectly.

Problem: I want to add an annotation to the map, which should be interactive from the inside, usually the annotation is interactive, just clicking on it, it works, I need something like UIButton in the annotation and click on the button action that should be executed.

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

Any help is appreciated.

Thanks.

Edit:

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

Answer 1

I can finally finish this job. I created a subclass class of RMMarker in the MapBox Project, and I add all components as CALayer, adding components to UIView , and then adding UIView.layer does not work. You must add sublayers to the UIView layer.

Then I created invited delegates to handle touch events.

Make sure you use MapBox from here and add MyMarker to your 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;

Setting 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 this helps someone who wants to create Marker / Annotation and wants them to take a few steps.

Answer 2

Why not just use the delegate - (void) singleTapOnMap:(RMMapView *)map at:(CGPoint)point ? I don’t see you using any button states, so it seems to me that 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") } } 

Answer 3

You can also use:

 func mapView(mapView: RMMapView!, didSelectAnnotation annotation: RMAnnotation!) 

delegate the method and do what you wanted to do in the action of the pressed button.

Answer 4

Take a look at this example in the MapBox documentation: http://www.mapbox.com/mapbox-ios-sdk/examples/callout-accessory-view/ This is very similar to MapKit.