Tutorial 4

Tutorial 4 - Adding two UI buttons to the Mapping Engine demo

If you would like to experiment with or "play with" the BA3 Mapping Engine, it would be nice to have a quick and easy way to add UI buttons. You can of course do this in the UI builder in Xcode, but the method here is quicker and therefore lends itself to simple experiments. In this tutorial we will demonstrate how to add two buttons - one to turn the GPS functionality on and off, the other to turn the Track-Up capability on and off. Start with the code from Tutorial 3.

Step 1

Start by adding several lines of code to ViewController.h

@property (assign) BOOL isGPSMode;
//UI properties
@property (retain) IBOutlet UIButton* btnGPS;
@property (retain) IBOutlet UIButton* btnTrackUp;
//Methods
- (void) gpsButtonTapped;
- (void) trackUpButtonTapped;

These lines add a property to keep track of whether the GPS is currently on or off, add two properties for the two buttons we will add, and add two methods that will be called when the buttons are clicked by the user.

Step 2

Add a function to ViewController.m to add the two buttons:

////////////////////////////////////////////////////////////////////////////
//Add some extremely simple UI right on top of the map.
//Normally you would do this using the interface builder, but our goal here
//is to keep this very simple to illustrate mapping-engine concepts.
- (void) addButtons
{
	self.btnGPS = [UIButton buttonWithType:UIButtonTypeRoundedRect];
	[self.btnGPS setTitle:@"GPS - Off" forState:UIControlStateNormal];
	[self.btnGPS setTitle:@"GPS - On" forState:UIControlStateSelected];
	[self.view addSubview:self.btnGPS];
	[self.view bringSubviewToFront:self.btnGPS];
	self.btnGPS.frame=CGRectMake(0,0,90,30);
	[self.btnGPS addTarget:self
			   action:@selector(gpsButtonTapped)
	 forControlEvents:UIControlEventTouchDown];
	self.btnTrackUp = [UIButton buttonWithType:UIButtonTypeRoundedRect];
	[self.btnTrackUp setTitle:@"TU - Off" forState:UIControlStateNormal];
	[self.btnTrackUp setTitle:@"TU - On" forState:UIControlStateSelected];
	[self.view addSubview:self.btnTrackUp];
	[self.view bringSubviewToFront:self.btnTrackUp];
	self.btnTrackUp.frame=CGRectMake(self.btnGPS.frame.size.width, 0, 90, 30);
	[self.btnTrackUp addTarget:self
					action:@selector(trackUpButtonTapped)
		  forControlEvents:UIControlEventTouchDown];
}

We are not using the UI builder at all - we are creating, labeling and positioning the bottons ourselves here in the code. This has the advantage of working identically on the iPhone and iPad and handling rotation automatically, which is great for keeping a tutorial short and simple. What we give up is beauty.

Step 3

Add this line to the viewDidLoad function in ViewController.m prior to calling initializeMappingEngine:

	//Add some UI
	[self addButtons];

Step 4

We need to add functions to deal with the buttons being clicked by the user. Add these functions to ViewController.m:

///////////////////////////////////////////////
//Turn track-up mode on or off
- (void) enableTrackupMode:(BOOL) enabled
{
	if(enabled)
	{
		[self.meMapViewController setRenderMode:METrackUp];
		self.meMapView.panEnabled = NO;
	}
	else
	{
		[self.meMapViewController unsetRenderMode:METrackUp];
		self.meMapView.panEnabled = YES;
	}
	self.isTrackupMode = enabled;
}
////////////////////////////////////////////////
//Init GPS
- (void) initializeGPS:(BOOL) enabled
{
	if(enabled)
	{
		if(self.locationManager==nil)
		{
			self.locationManager = [[[CLLocationManager alloc] init] autorelease];
			self.locationManager.delegate = self;
		}
		[self.locationManager startUpdatingLocation];
	}
	else
	{
		[self.locationManager stopUpdatingLocation];
	}
}
- (void) gpsButtonTapped
{
	//Toggle GPS
	self.isGPSMode = !self.isGPSMode;
	[self initializeGPS:self.isGPSMode];
	self.btnGPS.selected = self.isGPSMode;
}
- (void) trackUpButtonTapped
{
	//Toggle trackup mode
	self.isTrackupMode = !self.isTrackupMode;
	[self enableTrackupMode:self.isTrackupMode];
	self.btnTrackUp.selected = self.isTrackupMode;
}

Step 4

We need to add functions to deal with the orientation of the device. We have ignored this in the prior tutorials but will deal with it here. Add these functions to ViewController.m:

////////////////////////////////////////////////////////////////////////////
//Size map view when device rotates
- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
	self.meMapView.frame = self.view.bounds;
}
////////////////////////////////////////////////////////////////////////////
//Size map view when view appears (handles landscape startup)
- (void) viewDidAppear:(BOOL)animated
{
	[super viewDidAppear:animated];
	self.meMapView.frame = self.view.bounds;
}

Step 5

Run the app. The buttons should work as expected when you click them. In the iOS Simulator menu bar, choose the Debug menu and then choose the Location item. Choose one of the options that show motion, like "Freeway Drive" or "City Bicycle Ride". Look in the console window of Xcode and you will see the speed and course changing. The map should pan to the new location so that the new location is centered on the screen and rotate the map to demonstrate Track-Up mode if you click the buttons to turn on the GPS and turn on Track-Up.

Step 6

If you get lost or wish to save yourself the typing, simply checkout tutorial4 using these commands:

git reset --hard
git checkout tutorial4

Step 7

Now we would like to add a marker to show the current GPS location and orientation in the app. This is explained in Tutorial 5.

You can learn more about the Mapping Engine classes used in this tutorial in the Documentation. You can find a directory of all of the tutorials on the Main Page. If you have any questions about the BA3 Mapping Engine, any feature requests or suggestions for improving the Mapping Engine, please send them to [email protected]