Cloudmade Map Integration for iPhone – Switching between a MKMapkit Map and a RMMapView

Cloudmade Map Integration for iPhone – Switching between a MKMapkit Map and a RMMapView

Unfortunately Route-Me maps don’t have access to the Google tiles (unless something has changed since this post). So if you want to have both Cloudmade’s awesome implementation of the route-me OpenStreetMap maps and Google maps via MKMapKit, then you have to do some creative coding. The solution I came up with is to switch between the two views depending on which map type I wanted to display. Showing and hiding the RMMapView view and the MKMapKit view accordingly.  Cloudmade’s CTO talks tech.

Now the trick is getting the maps to track each other and getting the correct scale/range/zoom for each of the maps as you navigate around. Here’s what I came up with:

#define kMetersPerDegree 111000
if(mMapOptions.mapType == TTMapOptions_MapType_Trails) {
//set the center of the cloudmade map based on the MKMapKit's center
[mCloudmadeViewController.mapView moveToLatLong:mGoogleMapView.centerCoordinate];
//set the scale by taking the latitude distance in meters and dividing it by the width of the view in pixels
// scale = meters/px
float scale = (mGoogleMapView.region.span.latitudeDelta * kMetersPerDegree) / mGoogleMapView.frame.size.width; 
[mCloudmadeViewController.mapView.contents setMetersPerPixel:scale];        
[mCloudmadeViewController.mapView.markerManager removeMarkers];        
[mCloudmadeViewController refreshMap];
[mCloudmadeViewController setMapSource];
}
else {  //switching back to google maps from Cloudmade
RMMapView *mapView = mCloudmadeViewController.mapView;
//get the upper right and lower left coordinates
RMSphericalTrapezium trap = [mapView.contents latitudeLongitudeBoundingBoxForScreen];
//determine the deltas
CLLocationDegrees latitudeDelta = trap.northeast.latitude - trap.southwest.latitude;
CLLocationDegrees longitudeDelta = trap.northeast.longitude - trap.southwest.longitude;
//set the span and region
MKCoordinateSpan span = MKCoordinateSpanMake(latitudeDelta, longitudeDelta);
MKCoordinateRegion region = MKCoordinateRegionMake(mapView.contents.mapCenter, span);
[mGoogleMapView setRegion:region];