Use Maps in a Mobile Application

This document describes how to add the Maps Module to your mobile application using the Application Designer and display Contact objects on a map.

Add the Maps Module

Important

If you have already enabled the Maps Module using the Solution Wizard in the Add a Mobile Application Project lesson, proceed to the Display Objects on a Map section.

  • Open the Application Designer for your mobile application by double-clicking the MobileApplication.cs (MobileApplication.vb) file in the MySolution.Mobile project. In the Toolbox, navigate to the DX.18.2: XAF Modules group and drag the MapsMobileModule item from this group to the Designer's Modules section.

    MobileTutorial_Maps_MapsMobileModule

  • Rebuild your solution.

Display Objects on a Map

Business objects supporting the IMapsMarker interface can be displayed on a map. This interface declares the Longitude, Latitude and Title properties. Implement the IMapsMarker interface to specify the Contact geolocation as demonstrated below:

public class Contact : Person, IMapsMarker {
    // ...
    private double latitude;
    public double Latitude {
        get {
            return latitude;
        }
        set {
            SetPropertyValue("Latitude", ref latitude, value);
        }
    }
    private double longitude;
    public double Longitude {
        get {
            return longitude;
        }
        set {
            SetPropertyValue("Longitude", ref longitude, value);
        }
    }
    [PersistentAlias("FullName")]
    public string Title {
        get { return Convert.ToString(EvaluateAlias("Title")); }
    }
}

Save the file and rebuild the solution.

The MobileMapsListEditor is the default List Editor used to show IMapsMarker objects. Thus, the Contact_ListView's List Editor changes from the default MobileListEditor to the MobileMapsListEditor, which allows you to display the Contact objects on a map.

Generate a Google Maps key (refer to the Get API Key article to learn how to configure this key.) Assign this key to the MapsMobileModule.GoogleApiKey property in the MobileApplication.cs (MobileApplication.vb) file to display a map by adding the following code to the InitializeComponent method:

public partial class MobileSolutionMobileApplication : MobileApplication {
    // ...
    private void InitializeComponent() {
        // ...
        this.mapsMobileModule1 = new DevExpress.ExpressApp.Maps.Mobile.MapsMobileModule();
        this.mapsMobileModule1.GoogleApiKey = "Insert your key here";
        // ...
    }
}

Run the application and open the Contact List View. Edit an existing object or create a new one by long tapping any point on the map (the Latitude and Longitude properties are specified to the corresponding coordinates) or by clicking the New button (specify these properties manually). You can also click the GetCurrentPosition button in the Detail View to get your current location's coordinates.

MobileTutorial_Maps_ListView_Runtime

Save the changes and go back to the map. If you did not set these properties when creating a new Contact, this object is displayed on a map with 0' 0' coordinates. You can click a marker to see its title or invoke the objects Detail View.

MobileTutorial_Maps_Map_Runtime

View the Contacts on a Map and as a List of Objects

Currently you can access the Contact objects only on a map. To view the Contact objects also as a list, follow the steps below:

  • Open the Model Editor for your mobile application by double-clicking the Model.xafml file located in the MySolution.Mobile project. Navigate to the Views | MySolution.Module.BusinessObjects node, right-click Contact_ListView and choose Clone in the context menu.

    MobileTutorial_Maps_CloneListView

  • A new Contact_ListView_Copy node is created. Set the Caption property to Contacts on Map and Id to Contact_ListView_Maps. Do not change the EditorType property value. Note that all Contact type properties use the MobileMapsPropertyEditor for displaying, so if you have such properties, change their Property Editor type to MobileLookupPropertyEditor.

    MobileTutorial_Maps_ContactListViewMaps

  • Navigate to the Contact_ListView node and set the EditorType property to MobileListEditor.
  • Customize the layout of the Contact_DetailView, for example, create a new layout group for the coordinates' Property Editors. Refer to the View Items Layout Customization topic to learn more about layout customization.

    MobileTutorial_Maps_LayoutCustomization

  • Add a new navigation node to the Default navigation group as described in the Add an Item to the Navigation Control topic. For the newly added node, select "Contact_ListView_Maps" on the View dropdown list. The Caption property is automatically set to "Contacts on Map". Optionally, you can set a user-friendly Id value and ImageName.
  • Save changes.

Next Lesson: Access Mobile Editor Settings