How can I achieve a smooth resizing of a MKCircleView on a UIMapView when adjusting an NSSlider? Apple has managed to do it in the Find my friends app when creating geofences (http://reviewznow.com/wp-content/uploads/2013/03/find-my-friends-location-alerts-01.jpg), so I guess it's possible in some way. So far I've tried the following solutions, but with a very "flickery" result:
First attempt
I added a new MKCircleView with an updated radius and immediately after removing the one that was (as suggested here MKOverlay not resizing smoothly) when the slider changed value. I also tried the other way around: first removing the overlay then adding a new one, but with the same "flickery" result.
- (void)sliderChanged:(UISlider*)sender
{
double radius = (sender.value * 100);
[self addCircleWithRadius:radius];
[mapView removeOverlays:[self.mapView.overlays firstObject]];
}
Second attempt
In the linked SO answer, he suggests that NSOperation could be used to "help you create the MKCircle objects faster" and thus making the resizing smoother using the above method of adding/removing overlays when the slides changes value. I did a implementation where I start a new thread whenever the slider changes. In each thread I remove all old overlays and add a new one with the updated scale. Perhaps he has some other kind of implementation in mind, because the way I did it I still get the same flicker when changing the slider.
- (void)sliderChanged:(UISlider*)sender
{
NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self
selector:#selector(updateOverlayWithScale:)
object:[NSNumber numberWithFloat:sender.scale]];
[self.queue addOperation:operation];
}
The method that runs i each thread:
- (void)updateOverlayWithScale:(NSNumber *)scale
{
MKCircle *circle = [MKCircle circleWithCenterCoordinate:self.currentMapPin.coordinate
radius:100*[scale floatValue]];
[self.mapView performSelectorOnMainThread:#selector(removeOverlays:) withObject:self.mapView.overlays waitUntilDone:NO];
[self.mapView performSelectorOnMainThread:#selector(addOverlay:) withObject:circle waitUntilDone:NO];
}
Third attempt
I also tried implementing my own subclass of MKOverlayView that draws itself based on its scale property. Whenever the slider changes I call setNeedsDisplay and let it redraw itself, but I get the same flicker.
- (void)sliderChanged:(UISlider*)sender
{
self.currentOverlayView.scale = sender.scale
[self.currentOverlayView setNeedsDisplay];
}
And in my custom overlay view I implement drawMapRect:zoomScale:inContext:(CGContextRef)context like this
- (void)drawMapRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale
inContext:(CGContextRef)context
{
double radius = [(MKCircle *)[self overlay] radius];
radius *= self.scale;
// ... Create a rect using the updated radius and draw a circle inside it using CGContextAddEllipseInRect ...
}
So, do you have any ideas? Thanks in advance!
A few months ago I stumbled upon this animated MKCircleView. It also has a demo on git. So I guess you should give it a go!
Check it out as you might be able to tweak it to your needs with a slider etc.
Credits go to yickhong for providing this YHAnimatedCircleView
Related
I have a legacy code to maintain where I have a UIView and inside that container I have an MKMapView. There are custom annotations on this mapView. If I tap on them, the mapContainer and the mapView resizes their height, also the centerCoordinate of the mapView is set to the coordinate of the selected annotation.
#property(nonatomic,weak) IBOutlet UIView *mapContainer;
#property(nonatomic,weak) MKMapView *mapView;
To makes things more complicated these 3 things should happen at the same time animating together. The animation itself is working neatly, so the calculation of the bounds, center, etc should be fine.
#weakify(self);
[UIView animateWithDuration:self.detailsPanelSlideAnimationDuration animations:^ {
#strongify(self);
self.mapContainer.bounds = self.mapContainerViewWithDetailsFrame;
CGPoint center = CGPointMake(CGRectGetWidth(self.mapContainerViewWithDetailsFrame) / 2.0f, CGRectGetHeight(self.mapContainerViewWithDetailsFrame) / 2.0f);
self.mapContainer.center = center;
self.mapView.bounds = self.mapViewWithDetailsFrame;
self.mapView.center = self.mapContainer.center;
[self.mapView setCenterCoordinate:self.selectedAnnotation.coordinate animated:NO];
// setting other frames/bounds/centers not related to the map or annotations
...
} completion:NULL];
The problem is that during this animation the custom annotation images are not on the correct position. They are going to another direction. They jump into the right place after the animation has completed but this causes an unpleasant experience.
I would remove them before the animation and put them back after but they should be visible during the animation too. What do you suggest I should do?
EDIT:
I thought that forcing the annotations to redraw more frequently during the animation would help this problem, but I had no luck.
(I created a nested animation with repetition. Inside the animation block I iterated through the mapView's annotations and called setNeedsLayout.)
I working around with map app, I want to ask how to change the polyline color without remove and add it again, I found this topic https://stackoverflow.com/questions/24226290/mkpolylinerenderer-change-color-without-removing-overlay in stackoverflow but this is not involve with my question, I did not touch the line, so no need to do with -[MKMapViewDelegate mapView:didSelectAnnotationView:]
So is it possible to do that?
EDIT: What I want to do is change the polyline color smoothly (by shading a color - sound like an animation) If you have any idea on how to animate this polyline please also tell me too. Thanks
Complex animations or shading/gradients will probably require creating a custom overlay renderer class.
These other answers give ideas about how to draw gradient polylines and animations will most like require a custom overlay renderer as well:
how to customize MKPolyLineView to draw different style lines
Gradient Polyline with MapKit ios
Draw CAGradient within MKPolyLineView
Apple's Breadcrumb sample app also has an example of a custom renderer which you may find useful.
However, if you just want to update the line's color (say from blue to red), then you may be able to do that as follows:
Get a reference to the MKPolyline you want to change.
Get a reference to the MKPolylineRenderer for the polyline obtained in step 1. This can be done by calling the map view's rendererForOverlay: instance method (not the same as the mapView:rendererForOverlay: delegate method.
Update the renderer's strokeColor.
Call invalidatePath on the renderer.
Not sure what you want but you may be able to "animate" the color going from blue to red by changing the color and calling invalidatePath gradually in timed steps.
Another important thing is to make sure the rendererForOverlay delegate method also uses the line's "current" color in case the map view calls the delegate method after you've changed the renderer's strokeColor directly.
Otherwise, after panning or zooming the map, the polyline's color will change back to whatever's set in the delegate method.
You could keep the line's current color in a class-level variable and use that in both the delegate method and the place where you want to change the line's color.
An alternative to a class-level variable (and probably better) is to either use the MKPolyline's title property to hold its color or a custom polyline overlay class (not renderer) with a color property.
Example:
#property (nonatomic, strong) UIColor *lineColor;
//If you need to keep track of multiple overlays,
//try using a NSMutableDictionary where the keys are the
//overlay titles and the value is the UIColor.
-(void)methodWhereYouOriginallyCreateAndAddTheOverlay
{
self.lineColor = [UIColor blueColor]; //line starts as blue
MKPolyline *pl = [MKPolyline polylineWithCoordinates:coordinates count:count];
pl.title = #"test";
[mapView addOverlay:pl];
}
-(void)methodWhereYouWantToChangeLineColor
{
self.lineColor = theNewColor;
//Get reference to MKPolyline (example assumes you have ONE overlay)...
MKPolyline *pl = [mapView.overlays objectAtIndex:0];
//Get reference to polyline's renderer...
MKPolylineRenderer *pr = (MKPolylineRenderer *)[mapView rendererForOverlay:pl];
pr.strokeColor = self.lineColor;
[pr invalidatePath];
}
-(MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id<MKOverlay>)overlay
{
if ([overlay isKindOfClass:[MKPolyline class]]) {
MKPolylineRenderer *pr = [[MKPolylineRenderer alloc] initWithPolyline:overlay];
pr.strokeColor = self.lineColor;
pr.lineWidth = 5;
return pr;
}
return nil;
}
Yous hould look at MKOverlayPathRenderer method
- invalidatePath.
From the doc, it says:
Call this method when a change in the path information would require
you to recreate the overlay’s path. This method sets the path property
to nil and tells the overlay renderer to redisplay its contents.
So, at this moment, you should be able to change your drawing color.
I'm adding and removing annotations to a map view. When I remove one it disappears abruptly and looks a bit startling, I'd rather it faded away gracefully.
I tried removing it with UIView:animateWithDuration: but it wasn't an animatable attribute.
If there's no other easy solution I was thinking I could get the annotation view to fade its alpha and then remove its annotation from the map. However the problem with this is it doesn't seem like an annotation view has a reference to its map view? Adding one starts to get a bit messy.
Is there some easy quick solution to removing an annotation gracefully?
Using animateWithDuration should work fine. To fade the removal of an annotation, one can:
MKAnnotationView *view = [self.mapView viewForAnnotation:annotation];
if (view) {
[UIView animateWithDuration:0.5 delay:0.0 options:0 animations:^{
view.alpha = 0.0;
} completion:^(BOOL finished) {
[self.mapView removeAnnotation:annotation];
view.alpha = 1.0; // remember to set alpha back to 1.0 because annotation view can be reused later
}];
} else {
[self.mapView removeAnnotation:annotation];
}
I think your proposed solution is the correct one. Set up an animation to opacity = 0, then, upon completion, remove the annotation from the MKMapView. The code that starts the animation doesn't have to be in the view itself; a better location for the code may be the view controller. Consider using NSNotificationCenter to notify the view controller that an annotation is requesting fade-out-and-remove.
I have a mapView (RouteMe mapView) on which there are annotations (markers).
On the mapView there is a touchesEnded function on which I usually catch all events.
Some markers have an added layer on top of them.
That layer has some animation images and as much as I know this is the only way I can show these animation images on top of the markers.
The problem is that I don't know how I can intercept a touch on a marker that has that layer on top of it. When I test the hit on the touchesEnded I recognize a CALayer class rather than a RMMArker class (obv0iously, because the layer is on top of the marker, therefore is first to intercept the event).
How can I reach the Marker once the top CALayer is tapped?
Thanks
Hackish workaround: Create an RMMapLayer instead of a CALayer. Remember to set the annotation on the sublayer to get things like callouts to work, e.g. in your RMMapLayer subclass:
RMMapLayer *sublayer = [[RMMapLayer alloc] init];
sublayer.annotation = ann;
sublayer.contents = (id)img2.CGImage;
sublayer.contentsScale = img2.scale;
sublayer.position = CGPointMake(CGRectGetWidth(self.bounds)/2, CGRectGetHeight(self.bounds)/2);
sublayer.bounds = CGRectMake(0, 0, img2.size.width, img2.size.height);
[self addSublayer:sublayer];
I don't know how many other things this has potential for breaking though, so you can follow this issue for any updates:
https://github.com/mapbox/mapbox-ios-sdk/issues/190
You can instruct the touches to passthrough. Take a look at this question: How can I click a button behind a transparent UIView?
Since the CALayer was on top of a CALAyer, all it took was to access it ancestor blockingLayer.superlayer.
By checking on the ancestor, I could have all that I needed.
This solved the problem.
I have an overlay on the map, and I would like to change its coordinates. To do this seamlessly I'm going to call the setNeedsDisplayInMapRect: method after the change has been made to the view.
I've tested this out by just changing the fillColor and it works fine:
overlayView.fillColor = [[UIColor greenColor] colorWithAlphaComponent:0.3];
[overlayView setNeedsDisplayInMapRect:mapView.visibleMapRect];
However I've seemingly hit a brick wall trying to also change the center coordinates of my overlay view (which is an MKCircleView with an MKCircle). There is a method in
MKAnnotation, which MKCircle conforms to, called setCoordinate: - which seems like what I need. Unfortunately though, the circle property in MKCircleView is readonly. Moreover the overlay property in MKOverlayView is also readonly.
Is there actually a way of changing the coordinates for an overlay, without resort to remove the overlay view and adding a new one (which would cause very noticeable flicker on the screen.) ?
same problem is occurred here , so i'm creating set of method and calling it according to requirement.
-(void)removeAllAnnotationFromMapView{
if ([[self.tmpMapView annotations] count]) {
[self.tmpMapView removeAnnotations:[self.tmpMapView annotations]];
}
}
-(void)removeAllOverlays{
if ([[self.tmpMapView overlays] count]) {
[self.tmpMapView removeOverlays:[self.tmpMapView overlays]];
}
}
-(void)removeOverlayWithTag:(int)tagValue{
for (MKOverlayView *oView in [self.tmpMapView overlays]) {
if (oView.tag == tagValue) {
[self.tmpMapView removeOverlay:oView];
}
}
}