The requested page is not available for the requested platform. You are viewing the content for .NET Framework 4.5.2+ platform.

Use Raster Maps

  • 5 min to read

This topic describes how to show business objects on a raster map.

Run the Application Designer for the ASP.NET or Mobile application project. Drag the MapsAspNetModule or MapsMobileModule component from the Toolbox to the designer's Modules pane.

MapsModule_Toolbox

Implement the business class that supports the IMapsMarker interface. In the code below, a new Location business class is created. You can also support IMapsMarker in an existing business class.

Entity Framework

using DevExpress.Persistent.Base;
// ...
[DefaultClassOptions]
public class Location : IMapsMarker {
    [Browsable(false)]
    public int ID { get; private set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
    public string Title { get; set; }
}

eXpress Persistent Objects

using DevExpress.Xpo;
using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
// ...
[DefaultClassOptions]
public class Location : BaseObject, IMapsMarker {
    public Location (Session session) : base(session) { }
    public string Title { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }
}
Note
  • You can find the complete example for XPO in the Main Demo (see %PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework\MainDemo\CS\MainDemo.Module\BusinessObjects\Location.cs).
  • Also you can see the demonstration of the MapsAspNetModule in the ListEditors | Maps section of the Feature Center application that is shipped with XAF. The Feature Center demo is installed in %PUBLIC%\Documents\DevExpress Demos 19.2\Components\eXpressApp Framework\FeatureCenter by default. The ASP.NET version of this demo is available online at http://demos.devexpress.com/XAF/FeatureCenter/.

Run the Model Editor for the ASP.NET or Mobile application project and navigate to the Views | Location_ListView | MapSettings (Views | Location_ListView | MobileMapSettings) node. Here, you can change the map options or keep the default settings unchanged.

MapSettingsNode_ListView

Refer to the member list of the IModelMapSettings and IModelMobileMapSettings interfaces to see the descriptions of these options.

Tip

Note that the IModelListView.EditorType property of the Location_ListView node is set to WebMapsListEditor for an ASP.NET application (MobileMapsListEditor for a Mobile application). This is done automatically for any List View that displays IMapsMarker objects. You can customize this behavior using the MapsAspNetModule.SetMapsEditorsAsDefault (MapsMobileModule.SetMapsEditorsAsDefault) property.

If you use Google as the maps provider (used in all Mobile applications and in ASP.NET applications when the IModelMapSettings.Provider property set to Google), specify the MapsAspNetModule.GoogleApiKey property in the WebApplication.cs (WebApplication.vb) and MapsMobileModule.GoogleApiKey property - in the MobileApplication.cs (MobileApplication.vb) file to display a map. Refer to the Get API Key article to learn how to configure this key.

Run the ASP.NET application. The Location List View is visualized using the MapViewer control. You can create markers using the New Action.

Maps_Raster

A tooltip is displayed when you click a marker. The Show details link within the tooltip allows you to invoke the marker's Detail View.

Maps_Tooltip

If you add a property whose type supports the IMapsMarker to a business object, the WebMapsPropertyEditor will automatically be used for this property.

Maps_MapsPropertyEditor

You can adjust WebMapsPropertyEditor settings using the Views | DetailView | Items | ViewItem | MapSettings node.

MapSettingsNode_DetailView

Then, run the Mobile application. The Location List View is visualized using the DevExpress.ExpressApp.Maps.Mobile.Map control. You can create markers clicking the New button or long tapping on a map.

Maps_CustomMarker_Mobile

A tooltip is displayed when you click a marker. The Show details button within the tooltip allows you to invoke the marker's Detail View.

Maps_Mobile_Tooltip

If you add a property whose type supports the IMapsMarker to a business object, the MobileMapsPropertyEditor will automatically be used for this property.

Maps_MapsPropertyEditor_Mobile

You can adjust MobileMapsPropertyEditor settings using the Views | DetailView | Items | ViewItem | MobileMapSettings node.

See Also