Customizing Mapbox Callout with HTML on iOS - ios

I am trying to implement a custom callout using MapBox on iOS. When the user presses on the marker I would like a callout to display a UIWebView rather than a left and right accessory view and the title with text only.
I have searched through the SDK documentation and cannot find a simple way to access the view of the annotation title so I can set it to a UIWebView.
I started off by trying to access the annotation layer to see if I could make changes, such as:
RMAnnotation *annotation = [[RMAnnotation alloc] initWithMapView:mapView coordinate:CLLocationCoordinate2DMake(56.0,-4.0) andTitle:#"test"];
annotation.userInfo = #"test";
RMMapLayer *layer = annotation.layer;
layer.backgroundColor = [UIColor blackColor].CGColor;
However, when I press on the marker the annotation bubble is still white.
I have searched through the SDK to try to understand the relationship between the RMAnnotation and RMMarker classes and how they interact but think my understanding is flawed and hence I am not getting anywhere.
If anyone can help point me in the right direction that would be appreciated!

Ok, I figured out a way to make this work. Its a little of a 'hack' but it works really well for my purposes so I thought I would share. Please comment if you have a better idea and also tell me if this is not a great way to do it.
I checked the SDK source code and the RMMapView passes the SMCalloutView object the title, subtitle and left/right accessory views. When I checked the SMCalloutView code there is the ability to provide a custom callout by passing a UIView to contentView, but the RMMapView doesn't provide for passing this. My fix was to synthesize the SMCallout (_currentCallout) so that I can access contentView from my ViewController and set contentView to a UIWebView. I chose to create a new delegate method in RMMapViewDelegate called aboutToDisplayAnnotation that provides me with the opportunity to swap in my UIWebView before the callout is drawn to the screen, but I guess a better way might have been to rewrite the selectAnnotation method in RMMapView.

Related

How do I set the callout view’s background color when using the Mapbox iOS SDK?

I'm building a map application with the Mapbox SDK. Here is how I present an annotation on the map and auto-show the title popup:
[myAnnotation setCoordinate:touchMapCoordinate];
myAnnotation.title = #"This Is A Title";
[self.mapView addAnnotation:myAnnotation];
[self.mapView selectAnnotation:myAnnotation animated:YES];
Currently, the title pops up with a standard white background. However, I'd like the title to have a black background, as I use the light map and want the pop up to stand out a bit more. How could I do this?
As of Mapbox iOS SDK v3.2.0, the default callout view isn’t exposed and you’re not able to change its appearance beyond adding accessory views and title text.
Instead, you should provide a custom callout view that conforms to the MGLCalloutView protocol, then display it with your map using the MGLMapViewDelegate method -mapView:calloutForAnnotation:.
See this example for a working implementation in both Objective-C and Swift. The default callout view uses SMCalloutView and you could relatively easily adapt this example to also use it.

Make a Mapbox RMAnnotation display its callout programmatically

I'm making an iOS app (using Swift) that has a map in the Mapbox iOS SDK. I've gotten to the point of displaying several markers on the map. Now, I want the user to be able to select a marker from the list, panning to that marker (easy), which also makes the marker's callout bubble appear automatically without the user having to touch it (not so easy).
It's this last task I'm having trouble with. While I've found the RMMarker class's showLabel() method, I can't seem to directly access a RMAnnotation's associated RMMarker object, so I'm not sure where or how to call this method.
Does anyone know how this is done?
Ignore the showLabel() API — this is not the callout in use, but rather a text label that's possible directly on the annotation.
You probably want -[RMMapView selectAnnotation:animated:] with a NO in the animated argument.

Google Maps IOS SDK - Refreshing the MapView. (Objective-c)

I made a settings tab for the MapView's ViewController and it works fine when I open the MapViews's VC the first time. but when I change the settings after I opened and loaded the mapView the first time the settings that I changed don't apply to the mapView because it did not refresh. Is there a way of refreshing the data of the mapView? I have searched everywhere and couldn't find an answer.
if this question have been answerd before can you link me to it? Thank you.
I'm using the GoogleMaps ios sdk.
and I'm using obj-c.
If your settings just changes the icons, annotations, map markers or layers color , or location of markers or layer, the simplest way to do is clear all the markers and layers you add on the map view and re-add them. For example, implement a refreshMapView method
-(void)refreshMapView
{
[mapView clear];//this line clears all the markers or layers you drew on the mapView.
// then implement your method to re-draw the markers and layers, or load new settings.
// for example, go through your marker list, and add them as follows:
for (id yourobject in yourMarkerArray){
GMSMarker *marker = [GMSMarker markerWithPosition:coordinatesOfMarker];
//custom marker here, set title, or snippets, or icon, etc...
marker.map = mapView;
}
// you can also redraw any map overlay here...
}
Jing's answer to implement a refreshMapView method is good, you could call that in your map view controller's viewWillAppear section.
Make sure you're actually setting the mapView properties in the same scope — i.e., your settings view and your map view may be looking at a different object or changes may be getting discarded. Without seeing the code for how you're trying to modify those settings, it's difficult to say.

mkmapview custom callout bubble ios6

I'm encountering a mystery issue when selecting a pin in the mapview iOS6
BTW, it works correctly in iOS 5, i'm not sure what they changed in the map of iOS 6 that produce this issue.
NOTE that when I click on the map, the callout directly go over the pins and shows correctly
any help/clue would be appreciated,
Thanks in advance
the answer might vary a bit depending on how you're implementing your custom callout bubble. This was/is the solution I'm using: Customize the MKAnnotationView callout and I ran into the exact same problem.
Basically, everytime the callout is going to show, I had to bring the subview to the front.
In this case, my custom callout bubble is a class called 'BaseCalloutView' which contains a UIView as its ContentView property (as you can see in the UML diagram at the link above). When the annotation is selected, it triggers the 'animateIn' function of the BaseCalloutView, into which I added:
[self.superview bringSubviewToFront:self];
As I mentioned, your mileage may vary depending on how you're implementing the custom callout bubble. I can provide you with the full code if needed - but to be honest 90% of my code is from the link above.
This solution didn't work for me, however the one did:
Custom Annotation View do not work on iOS6
Sorry not sure how to link answers properly.
In IOS 5 and IOS 6 , I try this and it's ok
the pin never overlap CalloutView.
I use custom calloutview , in file Base calloutView I add this :
- (void)didMoveToSuperview {
[super didMoveToSuperview];
[self.superview bringSubviewToFront:self];
}
I am using same code base, got same problem. [self.superview bringSubviewToFront:self]; doesn't work for me, not matter where did I put it. [annimateIn] or [didMoveToSuperView] or [layoutIfNeeded]
Because this problem went away by finger moving the map a little bit, so I found it is very easy to simulate this effect by put code in - (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view. The offset is very small, no visual movement can be noticed at all.
CLLocationCoordinate2D newCenterCoordinate = {self.mapView.region.center.latitude + 0.0000001,
self.mapView.region.center.longitude + 0.0000001};
[self.mapView setCenterCoordinate:newCenterCoordinate animated:NO];

Adding Custom Image on Mkannotationview, or on callout bubble?

i'm trying to reproduce the kind of map behavior of the app "Stuck On Earth". Here's a screenshot :
Here's the behavior :
On the map, as you can see there is pin
When you click on a pin, it display the picture attach to it. Really important : the picture stai with the pin, and it stays BEHIND it
If you click on the picture, a new controller is called
if you click on the pin, the picture disappear
I'm trying to do something similar. For now, as i can read, i've got two solutions :
Using callout : callout is HELL. I can try to use a false annotation, but MapKit deals with the depth of elements, and the picture is always in front of the pin
Using Custom Annotation : i was going for the plan of making custom annotation view, when the pin is tapped, i launch a method of the CustomAnnotationView, adding (or removing) the thumbnail.
I think the method number 2 could work, but i've got no idea how to deal with the touch on the thumbnail.
Any suggestions or help on this ?
Thanks you !
Updated 2016-09-02:
My colleague devised an workaround by making popup views as subview of the view container which contains the map view. The position can be calculated according to the CGPoint transform in different reference systems.
Original Answer:
I also got this kind of problem, after following the tutorial 'Building Custom Map Annotation Callouts – Part 1', the interaction becomes difficult.
Have you tried the tap gesture recognizer? I added it to a subview, it works, although the code smell bad.

Resources