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);
Related
I need to create a map view interface, which is something similar to the OLA Cabs Application in iOS. What I exactly wanna do is to fix an overlay on mapView and allow the user to scroll the map view across it. So that the overlay can be fixed at any location the User wants it to, I searched a lot about overlays, in iOS and MapKit, but couldn't make it possible. If some one can give me tips for achieving this I would be really grateful. Here is a snapshot of the screen
Here the annotation remains fixed and you can move the map view across it, So that when you stop the mapview, the overlay will be pointing to the new location, where you stopped
Click here to download demo...
Create a fix MKAnnotation and image view object to animating the location change effect in Map view.
#property (nonatomic, strong) CustomAnnotation *fixAnnotation;
#property (nonatomic, strong) UIImageView *annotationImage;
Add this code in viewDidLoad() method:
// Fix annotation
_fixAnnotation = [[CustomAnnotation alloc] initWithTitle:#"Fix annotation" subTitle:#"Location" detailURL:nil location:self.mapView.userLocation.coordinate];
[self.mapView addAnnotation:self.fixAnnotation];
// Annotation image.
CGFloat width = 64;
CGFloat height = 64;
CGFloat margiX = self.mapView.center.x - (width / 2);
CGFloat margiY = self.mapView.center.y - (height / 2) - 32;
// 32 is half size for navigationbar and status bar height to set exact location for image.
_annotationImage = [[UIImageView alloc] initWithFrame:CGRectMake(margiX, margiY, width, height)];
[self.annotationImage setImage:[UIImage imageNamed:#"mapannotation.png"]];
Now have to remove image when you drag a map view and add image which looks like an annotation. And after completion of that add annotation and remove image from Map View.
- (void)mapView:(MKMapView *)mapView regionWillChangeAnimated:(BOOL)animated {
NSLog(#"Region will changed...");
[self.mapView removeAnnotation:self.fixAnnotation];
[self.mapView addSubview:self.annotationImage];
}
- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated {
NSLog(#"Region did changed...");
[self.annotationImage removeFromSuperview];
CLLocationCoordinate2D centre = [mapView centerCoordinate];
self.fixAnnotation.coordinate = centre;
[self.mapView addAnnotation:self.fixAnnotation];
}
Its not an map annotation overlay, its a normal UIImageView which has been placed over MKMapView, and it always used to get the lat-long for the center point of the map.
Hope this would be an easy way to achieve your goal.
#Kampai has added the same code for you.
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).
So I've tried this-
-(void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view{
[self.mapAnnotationViewController.view removeFromSuperview];
MyLocation* location = (MyLocation*)view.annotation;
currentResultDictionary = [location cardJson];
[self.mapAnnotationViewController setAnnotationTitle: [location title]];
[self.mapAnnotationViewController setRating:3.0];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage* forwardButtonImage = [UIImage imageNamed:#"forward-50x50.png"];
button.frame = CGRectMake(141,5,25,25);
[button setBackgroundImage:forwardButtonImage forState:UIControlStateNormal];
[button addTarget:self action:#selector(displayCard:) forControlEvents:UIControlEventTouchUpInside];
//Since we are re-using the callout view,
//may need to do additional "cleanup" so that the callout
//shows the new annotation's data.
[view addSubview:self.mapAnnotationViewController.view];
[view addSubview: button];
}
-(IBAction)displayCard:(id)sender{
NSLog(#"DISPLAY CARD CALLED");
}
This adds the button successfully, but when I click on it, the displayCard method is not being called. Why is that happening?
So this is probably why it's not working -
How To add custom View in map's Annotation's Callout's
However, that solution subclasses the view - I only have access to the controller. Can I reduce my problem to be solved by that solution?
Based on your previous question, the problem here is that the button's frame is outside the frame of the pin annotation view. Therefore, touches on the button do nothing.
Assuming you are still using the default MKPinAnnotationView, the default view size is about 32 x 32. Since the button is being added as a subview to it at an x coordinate of 141, it is outside the parent view's frame and touches don't work.
One solution (though it leads to other issues) is to modify the MKPinAnnotationView's frame so that the button will included. So in viewForAnnotation, after the view is created, you could put:
pav = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:#"pin"];
pav.canShowCallout = NO;
//increase the frame size to include the button...
pav.frame = CGRectMake(0, 0, 200, 40);
//adjust contentMode otherwise default pin image will be distorted...
pav.contentMode = UIViewContentModeTopLeft;
I don't recommend the above. This may work but may lead to other issues.
A better solution probably is to add your custom callout view not to the annotation view but to your main view controller's view. This way, you don't need to mess with the annotation view. You'll need to convert the selected pin's coordinate to the corresponding CGPoint in the main view and set the custom callout view's origin to that point. In didSelectAnnotationView:
[self.mapAnnotationViewController.view removeFromSuperview];
CGRect mavcFrame = mapAnnotationViewController.view.frame;
CGPoint p = [mapView convertCoordinate:view.annotation.coordinate toPointToView:self.view];
//You may need/want to adjust p after the conversion depending on where
//you want the callout view to appear relative to the annotation.
mavcFrame.origin = p;
mapAnnotationViewController.view.frame = mavcFrame;
//add subview to self.view instead of view...
[self.view addSubview:self.mapAnnotationViewController.view];
Also, I don't recommend adding the button in the didSelectAnnotationView as you will end up with duplicate buttons that don't get removed every time an annotation is selected.
Instead, create and add the button once to the mapAnnotationViewController.view right after the mapAnnotationViewController is created.
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.
So I'm really confused. I used:
- (MKAnnotationView *)mapView:(MKMapView *)mapView viewForAnnotation:(id <MKAnnotation>)annotation {
static NSString* AnnotationIdentifier = #"Annotation";
MKPinAnnotationView *pinView = (MKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:AnnotationIdentifier];
if (!pinView) {
MKPinAnnotationView *customPinView = [[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:AnnotationIdentifier];
if (annotation == mapView.userLocation){
customPinView.image = [UIImage imageNamed:#"303761_4417778996801_94858213_n.jpg"];
[customPinView.layer setMasksToBounds:NO];
[self setRoundedView:customPinView toDiameter:kPictureDiameter];
[customPinView.layer setBorderColor:[UIColor whiteColor].CGColor];
[customPinView.layer setBorderWidth:5.0f];
[customPinView.layer setShadowColor:[UIColor blackColor].CGColor];
[customPinView.layer setShadowOpacity:1.0f];
[customPinView.layer setShadowRadius:20.0f];
[customPinView.layer setShadowOffset:CGSizeMake(0, 0)];
[customPinView setBackgroundColor:[UIColor whiteColor]];
}
return customPinView;
} else {
pinView.annotation = annotation;
}
return pinView;
}
to add my own image to the user location pin. And that works. There's two problems though:
Shadows aren't working.
The image I set for the user location pin is off center and looks like this:
user location picture
I've tried fooling around with CGRect, CGPoint, setting the frame, center ect (although I haven't tried changing the bounds as of yet) and nothing changes.
Any help would be so appreciated.
In terms of the image being off center, two thoughts:
I generally use MKAnnotationView when using my own images for annotations, not MKPinAnnotationView. When I tried using MKPinAnnotationView, my images were no longer centered.
If worst comes to worst, you can play with the centerOffset property. I don't think you should need to if you use MKAnnotationView.
Regarding your shadow:
A shadow radius of 20 is so great, that it's so diffuse that you can barely see it. I could barely make it out when I used 20. It was starting to become more visible at 10, and even more so at 5. I don't think this is the real problem here, but as you start to experiment, use a number low enough here so you can clearly see the shadow.
Having said that, I don't think that's the problem. I'm suspicious of the image rounding algorithm. Can you try temporarily commenting that out and see if your shadow appears? But I use shadows on my MKAnnotationView images, and it works fine. Can you share your rounding algorithm with us?
And if that doesn't do it, is this image coinciding with an overlay? (i.e. what's that circle behind the picture). I'd try, again, temporarily removing it and see if that changes the behavior. When I use a MKCircleView, it works fine, but let's make sure we're not doing anything curious there (or with any other drawing routines).