How to create Custom MKAnnotationView and custom annotation title and subtitle - ios

I need to create above Annotation view on MKMapView. I am able to create the custom annotation view but on the tap of annotation the view need to be opened image with that big text, I am not able to create that one. Please provide me some links or the way to do this task.

To create a custom annotation view (your replacement for the standard pin), you can just set the image property of the MKAnnotationView in the viewForAnnotation method:
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation
{
if ([annotation isKindOfClass:[MKUserLocation class]])
{
return nil;
}
else if ([annotation isKindOfClass:[YourAnnotationClassHere class]]) // use whatever annotation class you used when creating the annotation
{
static NSString * const identifier = #"MyCustomAnnotation";
MKAnnotationView* annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:identifier];
if (annotationView)
{
annotationView.annotation = annotation;
}
else
{
annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation
reuseIdentifier:identifier];
}
annotationView.canShowCallout = NO; // set to YES if using customized rendition of standard callout; set to NO if creating your own callout from scratch
annotationView.image = [UIImage imageNamed:#"your-image-here.png"];
return annotationView;
}
return nil;
}
You might also want to adjust the centerOffset property to get the pin to line up precisely the way you want.
Regarding the customization of the callout, the easiest approach is to specify leftCalloutAccessoryView, rightCalloutAccessoryView and/or detailCalloutAccessoryView. This gives you a surprising degree of control, adding all sorts of images, labels, etc.
If you want to do a radical redesign of the callout, you can have viewForAnnotation set canShowCallout to NO and then respond to setSelected in your custom annotation view to show your own callout. While in Swift, see Customize MKAnnotation Callout View? for a few options for customizing the callouts.

Related

MKMapView how to change the User Nearest location pin image?

I want to change user nearest location pin image in map view.
"In my Project i show the some of the shop locations in map view. The locations (lat,long) are get from the api. Here i changed the given location pin image. it works fine. but i need to change the user nearest location pin image in the map view. I already get the distance details from the user current location to given api locations in that which are the locations are below 5 miles that location pin images are need to change. "
Here is my Annotation Code:
// View for Annotation Delegate Code for changing the pin image.
-(MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation: (id<MKAnnotation>)annotation
{
[self.annotationCustom_View removeFromSuperview];
[self.annotationCurrentLoc_View removeFromSuperview];
static NSString *identifier = #"myAnnotation";
CustomMapViewAnnotation * annotationView = (CustomMapViewAnnotation *)[self.locationsMap_View dequeueReusableAnnotationViewWithIdentifier:identifier];
if (!annotationView)
{
annotationView = [[CustomMapViewAnnotation alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
if([annotation isKindOfClass:[MKUserLocation class]])
{
annotationView.image = [UIImage imageNamed:#"LocationsYour-Current-Location-Icon"]; // User Current Location Image
}
else
{
dispatch_async(dispatch_get_main_queue(), ^{
for(int i=0;i<[locations_ArrayList count];i++)
{
MapViewLocationModel *objValue=[locations_ArrayList objectAtIndex:i];
float value = [objValue.kiosk_distance floatValue];
if(value < 5.0)
{
annotationView.image = [UIImage imageNamed:#"LocationsFridge-Location-Icon"]; // Change the pin image which are the below 5.0 miles distance from the user current locations
}
else
{
annotationView.image = [UIImage imageNamed:#"LocationsBlackDot"]; // given api locations pin images
}
}
});
}
}
annotationView.canShowCallout = NO;
return annotationView;
}
This is my code. any one can help me on this?
Try following:
In order to display the pins in certain map area, first you need to
get the all pins inside the 5 miles.
// 1. Set the map zoom area visible of 5 miles:
mapView.region = MKCoordinateRegionMakeWithDistance(
centerCoordinate,
1609.344f * miles (5 in your case),
1609.344f * miles (5 in your case)
);
// 2. Now get the Rect of this map area:
MKMapRect mRect = self.map.visibleMapRect;
// 3. Get the all pins inside this Rect:
NSSet *annotationSet = [myMapView annotationsInMapRect:mRect];
// print number of annotations
NSLog(#"Number of annotations in rect: %d", annotationSet.count);
// this will return an array from the NSSet
NSArray *annotationArray = [annotationSet allObjects];
// 4. Assign some parameter to this annotation, by taking some property in the annotation class.
// 5. Now in your MapView Delegate method viewForAnnotation check the parameter and do the need full with the respective pins.
Hope this will help you to achieve what you want.

MKMapView customized pin image lose its accuracy when zoom in/out the map

I have a mapView in my app, and I'm using my own image for the MKAnnotationView, which is the the pin image. Here is my code for setting it.
-(RMAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(RentPin *)annotation{
static NSString *identifier = #"MyLocation";
if ([annotation isKindOfClass:[RentPin class]]) {
RMAnnotationView *annotationView = (RMAnnotationView *)[self.mapView dequeueReusableAnnotationViewWithIdentifier:identifier];
if(annotationView == nil){
annotationView = [[RMAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:identifier];
annotationView.enabled = YES;
annotationView.canShowCallout = NO;
annotationView.image = [UIImage imageNamed:#"home44.png"];
annotationView.centerOffset = CGPointMake(-10, -10);
}else{
annotationView.annotation = annotation;
}
return annotationView;
}
return nil;
}
It is working fine and the customized image is also showing properly, but when I pinch the mapView for zooming in/out the map, I noticed that the customized image loses its accuracy on the map. Please have a look the images following.
https://www.dropbox.com/s/irrgmohppf08fzr/image1.png
This image shows the pin is at this position, which is quite accurate.
https://www.dropbox.com/s/vvlr4ckk6molqd7/image2.png
After I zoomed out the mapView, the pin crossed the street and showing that this address is in the lake....
(Sorry for the links, since I can't post images because of insufficient reputation.)
Anyone could help me regarding this? my pin image is 44x44 and I also tried setting centerOffset of the pin, it cannot dynamically solved this problem in all the zoom levels.
It's simply the wrong center offset. But be aware that the center offset depends on the type of annotation view you are using. I don't know what RMAnnotationView is. If it's a subclass of MKAnnotationView, the centerOffset should be CGPointMake(0, -imageHeight / 2).

Google maps for iOS [map balloons]

How do I make map balloons when a marker is being touched or tapped in iOS?
to put it simply i want my application's map feature to be able to popup a map balloon to display certain information on the location where the marker is located.
I'm using google maps since i've heard that for now it is more accurate than the Mapkit in iOS.
the image below is my objective in this question:
If you want this custom map balloons for your markers, while using google maps sdk for ios, you can use the function
- (UIView *) mapView: (GMSMapView *) mapView markerInfoWindow: (GMSMarker *) marker
This allows you to display a custom info window for a marker instead of the default infowindow. You need to design a view as shown in your picture , assign the required values and return the view in this function. Please check this earlier post to see an example of making a custom infowindow . You can adjust how the infowindow is located with respect to the marker, by setting value for the property marker.infoWindowAnchor
To create a balloon like annotation , you need to override MKMapView's method
- (MKAnnotationView *)viewForAnnotation:(id < MKAnnotation >)annotation
Like this:
- (MKAnnotationView *)viewForAnnotation:(id < MKAnnotation >)annotation{
static NSString* annotationIdentifier = #"Identifier";
MKAnnotationView *annotationView = [mapView dequeueReusableAnnotationViewWithIdentifier:annotationIdentifier];
if(annotationView)
return annotationView;
else
{
MKAnnotationView *annotationView = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:annotationIdentifier];
// here we say NO to call out, it means the default popover type view wont open when you click on an //annotation and you can override to show your custom popover
annotationView.canShowCallout = NO;
// here you need to give a ballon image
annotationView.image = [UIImage imageNamed:[NSString stringWithFormat:#"balloon.png"]];
return annotationView;
}
return nil;
}
To create the custom popover/ view that opens when you tap on an annotation , you need to override MKMapViewDelegate's method
- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view
Here in this method you woould need to create a Popover Controller and present it.

Positioning a custom MKAnnotationView

I create a custom MKAnnoationView as follows:
- (MKAnnotationView *)mapView:(MKMapView *)theMapView viewForAnnotation:(id <MKAnnotation>)annotation
{
static NSString* AnnotationIdentifier = #"AnnotationIdentifier";
MKAnnotationView* customPinView = [[MKAnnotationView alloc]
initWithAnnotation:annotation reuseIdentifier:AnnotationIdentifier];
UIImage *pinImage = [PowerPlantAnnotation getAnnotationImageForEnergySource:((PowerPlantAnnotation*)annotation).energySource];
customPinView.image = pinImage;
return customPinView;
}
I get the image that I want positioned more or less in the right spot, but not quite. My image looks like this:
I want the bottom point of the tear drop to point to my annotation map coordinate, like the standard pin view points to the map coordinate. How can I accomplish this? Currently it looks a bit more like my image is centered on the map coordinate.
By default annotation view center is placed at the annotation coordinate. To adjust view position set its centerOffset property:
annotationView.centerOffset = CGPointMake(0.0f, -annotationViewHeight/2);

iOS MapKit Annotation, not showing correct location

I using a custom image for my mapkit annotation. But the main problem it seems that I am running into in using a custom image, is that when zoomed out, the annotation is not in the correct point on the map, and ONLY until I zoom in all the way down, will it show the annotation point in the correct place. It seems that when I use a regular pin MKPinAnnotationView, it works normally, as with the pin being in the correct place zoomed in or out, thanks in advance for anyone that can help.
The code I have used is as follows:
- (MKAnnotationView *)mapView:(MKMapView *)aMapView viewForAnnotation:(id <MKAnnotation>)annotation
{
NSLog(#"welcome into the map view annotation");
if ([annotation isKindOfClass:[MKUserLocation class]])
return nil;
MKAnnotationView *pprMapNote = [[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:#"pprMapNote"];
pprMapNote.image = [UIImage imageNamed:[NSString stringWithFormat:#"GPS_note.png"]];
pprMapNote.canShowCallout = YES;
pprMapNote.centerOffset = CGPointMake(-21,-60);
pprMapNote.calloutOffset = CGPointMake(0, 0);
//[pprMapNote addSubview:pprMapNoteImg];
UIButton* rightButton = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
[rightButton addTarget:self
action:#selector(showDetail)
forControlEvents:UIControlEventTouchUpInside];
pprMapNote.rightCalloutAccessoryView = rightButton;
//remember to write in conditional for the different icons that should be loaded based on location
UIImageView *pprNoteLocIcon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"loc_icon_casino.png"]];
pprMapNote.leftCalloutAccessoryView = pprNoteLocIcon;
[pprNoteLocIcon release];
return pprMapNote;
}
You are setting the centerOffset of the annotation view.
Note that this offset is not scaled with the zoom level. The further you zoom out, the further the image will appear from the coordinate.
In the default MKPinAnnotationView, the centerOffset is left at the default of 0,0 and the pin image is designed such that the bottom point of the pin is on the coordinate. So as you zoom further out, the pin image seems to grow relative to the map under it but the bottom of the pin is still pointing to the coordinate.
You need to either adjust the centerOffset based on your image or modify your image so you don't need to set centerOffset. Or just try commenting out the setting of centerOffset--maybe you don't need it.
Some other unrelated items:
You have a memory leak for the pprMapNote alloc+init (add an autorelease)
You should be using dequeueReusableAnnotationViewWithIdentifier to allow for annotation view re-use.
Instead of using addTarget to call your own method for the callout button press, it's much better to use the map view's own delegate method calloutAccessoryControlTapped
See this answer for an example of the above three points.
The Pin is drawn in a separate view, so it will not zoom based on the status of your view.
You have to set the size of your custom Pin image manually. This can easily be done using the centerOffset. For most cases it is enough to set the height of the frame to half the size of the image. The image is fully filled in the frame, so you can easily use this frame size(height).
aView.image = [UIImage imageNamed ... ];
aView.centerOffset = CGPointMake(0,-aView.frame.size.height*0.5);

Resources