View
Case Study
View
more
Request a quote
example
Back to Blog
26 March 2011

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];