Adding a MapView to your application

Maps have become ubiquitous across all levels of technology; we now have real-time maps everywhere, from our computers to our cars, the Web, and of course mobile devices. If you're working on iOS devices, the built-in mapping component is Apple Maps; for Android, it's Google Maps. Thankfully, Titanium provides a single native module that works seamlessly with both platforms. In our first recipe in this chapter, we'll be implementing a MapView using the Titanium Maps native module, and providing it with regional coordinates in the form of longitude and latitude values.

Getting ready

To prepare for this recipe, open up Appcelerator Studio and log in if you have not already done so. If you need to register a new account, you can do so for free, directly from within the application. Once you are logged in, click on New Project and select Classic. The details window for creating a new project will appear. Enter Exercise Tracker as the name of the app, and fill in the rest of the details with your own information.

Note

Pay attention to the app identifier, which is normally written in backwards domain notation (that is, com.packtpub.exercisetracker). This identifier cannot be changed easily once the project is created, and you will need to match it exactly when you will create provisioning profiles to distribute your apps later on.

The complete source code for this chapter can be found in the /Chapter 3 / Exercise Tracker folder.

How to do it...

Now that our project has been created using Appcelerator Studio, let's get down to business!

In order to use the Maps module, open the TiApp.xml file in Studio, and on the right, click on the + sign in the Modules section. Find and click on ti.map. Then, click on OK and save the changes to the TiApp.xml file.

Open the app.js file in your editor and remove all the existing code. After you have done that, type the following and then hit Save:

var tiMap = require('ti.map');

//create the window
var win1 = Ti.UI.createWindow({
    title: 'Exercise Tracker',
    backgroundColor: '#000'
});

//create our mapview
var mapview = tiMap.createView({
    height: 350,
    mapType: tiMap.STANDARD_TYPE,
    region: {
        latitude: 51.50015,
        longitude: -0.12623,
        latitudeDelta: 0.5,
        longitudeDelta: 0.5
    },
    animate: true,
    regionFit: true,
    userLocation: true
});

//add the map to the window
win1.add(mapview);

//finally, open the window
win1.open();

Try running the emulator now for either Android or iPhone. You should see a map appear in the middle of the screen, and after a few seconds, it should center on London, England, as shown in the following screenshot. You may also receive a request at this point from the simulator/emulator asking whether it can use your location. If this appears on your screen, simply select Yes.

How it works…

Most of this code should be pretty familiar to you by now; we created a Window object and added another object of the MapView type to it, before opening it via the win1.open() method. MapView itself has a number of new properties that are relevant and significant only for it. These include the following:

• region: This property accepts an object consisting of properties that contain the latitude and longitude points that we wish to center the map on, as well as latitude and longitude delta values. The delta values indicate the zoom level of the map according to its centered location.
• userLocation: This boolean value will turn on or off the blue dot indicator (an arrow on Android devices) that indicates where you are in relation to MapView. It's important to note that this will probably not function in the simulator due to its inability to properly ascertain your current position.
• animate: This boolean value will turn zooming and movement animation on or off in MapView. It is useful for targeting older devices with low processing power and/or low bandwidth.
• regionFit: This is a boolean value that indicates whether to ensure that the selected region fits the view dimensions given.

There's more...

After adding the MapView to our application, let's look at how we can make changes to the MapView's style.

Changing your MapView's style

There are actually a number of different MapView types that you can add to your application. If you defined the map module under the tiMap variable as per the preceding code, your types will be referenced as follows:

• tiMap.NORMAL_TYPE
• tiMap.SATELLITE_TYPE
• tiMap.HYBRID_TYPE
• tiMap.TERRAIN_TYPE (Android only)