In this post, I will describe adding the overlay of Radar on the MapView (MKMapView)
Here is the sample screen-shot of the output of this post.
1. Open your project & Import CoreLocation.framework & MapKit.framework
2. Download the sample code & import four files into your project. MapOverlay.h, MapOverlay.m, MapOverlayView.h, MapOverlayView.m.
3. Import following file into your viewController.h ( ViewController having the map )
|
1 2 |
#import "MapOverlay.h" #import "MapOverlayView.h" |
4. Now, Put following line of code to add the overlay on the map.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// create an overlay using the image self.mapOverlay = [[MapOverlay alloc] initWithLowerLeftCoordinate:CLLocationCoordinate2DMake(21.652538062803, -127.620375523875420) withUpperRightCoordinate:CLLocationCoordinate2DMake(50.406626367301044, -66.517937876818)]; // add the custom overlay [self.mapView addOverlay:self.mapOverlay]; // set the co-ordinates & zoom to specificly USA. MKMapPoint lowerLeft = MKMapPointForCoordinate(CLLocationCoordinate2DMake(21.652538062803, -127.620375523875420)); MKMapPoint upperRight = MKMapPointForCoordinate(CLLocationCoordinate2DMake(50.406626367301044, -66.517937876818)); MKMapRect mapRect = MKMapRectMake(lowerLeft.x, upperRight.y, upperRight.x - lowerLeft.x, lowerLeft.y - upperRight.y); [self.mapView setVisibleMapRect:mapRect animated:YES]; |
5. Now, over-ride following method for adding OverlayView on the mapview. Make sure, you have a MKMapView on your View & Delegate is connected properly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
-(MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id)overlay{ if([overlay isKindOfClass:[MapOverlay class]]) { MapOverlay *mapOverlay = overlay; if(!self.mapOverlayView) { self.mapOverlayView = [[MapOverlayView alloc] initWithOverlay:mapOverlay]; UIImageView *imgV =[[UIImageView alloc] init]; [imgV setContentMode:UIViewContentModeCenter]; [imgV setFrame:CGRectMake(0, 0, self.mapOverlayView.frame.size.width, self.mapOverlayView.frame.size.height)]; [imgV setCenter:self.mapOverlayView.center]; [self.mapOverlayView addSubview:imgV]; } } return self.mapOverlayView; } |
6. Run the project & test the output on simulator.
Source of Radar Image used from following location.
http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif
Let me know your comments & feedback on this.
Leave a Reply