Use Raster Maps

• Jul 28, 2020
• 4 minutes to read

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

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

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

C#

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

VB.NET

Imports DevExpress.Persistent.Base
Imports System.ComponentModel
' ...
<DefaultClassOptions>
Public Class Location
    Implements IMapsMarker

    Public Sub New()
    End Sub
    Private privateID As Integer
    <Browsable(False)>
    Public Property ID() As Integer
        Get
            Return privateID
        End Get
        Private Set(ByVal value As Integer)
            privateID = value
        End Set
    End Property

    Public Property Title() As String
    <Browsable(False)>
    Public ReadOnly Property Title2() As String Implements IBaseMapsMarker.Title
        Get
            Return Convert.ToString(Title)
        End Get
    End Property

    Public Property Longitude() As Double
    <Browsable(False)>
    Public ReadOnly Property Longitude2() As Double Implements IBaseMapsMarker.Longitude
        Get
            Return Convert.ToDouble(Longitude)
        End Get
    End Property

    Public Property Latitude() As Double
    <Browsable(False)>
    Public ReadOnly Property Latitude2() As Double Implements IBaseMapsMarker.Latitude
        Get
            Return Convert.ToDouble(Latitude)
        End Get
    End Property
End Class

eXpress Persistent Objects

C#

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

VB.NET

Imports System.ComponentModel
Imports DevExpress.Xpo
Imports DevExpress.Persistent.Base
Imports DevExpress.Persistent.BaseImpl
'...
<DefaultClassOptions>
Public Class Location
    Inherits BaseObject
    Implements IMapsMarker

    Public Sub New(session As Session)
        MyBase.New(session)
    End Sub
    '... 
    Private m_title As String
    Public Property Title As String
        Get
            Return m_title
        End Get
        Set(value As String)
            SetPropertyValue(NameOf(Title), m_title, value)
        End Set
    End Property
    <Browsable(False)>
    <PersistentAlias(NameOf(Title))>
    Public ReadOnly Property Title2 As String Implements IBaseMapsMarker.Title
        Get
            Return Convert.ToString(EvaluateAlias(NameOf(Title2)))
        End Get
    End Property

    Private m_latitude As Double
    Public Property Latitude As Double
        Get
            Return m_latitude
        End Get
        Set(value As Double)
            SetPropertyValue(NameOf(Latitude), m_latitude, value)
        End Set
    End Property
    <Browsable(False)>
    <PersistentAlias(NameOf(Latitude))>
    Public ReadOnly Property Latitude2 As Double Implements IBaseMapsMarker.Latitude
        Get
            Return Convert.ToDouble(EvaluateAlias(NameOf(Latitude2)))
        End Get
    End Property

    Private m_longitude As Double
    Public Property Longitude As Double
        Get
            Return m_longitude
        End Get
        Set(value As Double)
            SetPropertyValue(NameOf(Longitude), m_longitude, value)
        End Set
    End Property
    <Browsable(False)>
    <PersistentAlias(NameOf(Longitude))>
    Public ReadOnly Property Longitude2 As Double Implements IBaseMapsMarker.Longitude
        Get
            Return Convert.ToDouble(EvaluateAlias(NameOf(Longitude2)))
        End Get
    End Property
End Class

Note

• You can find the complete example for XPO in the Main Demo (see %PUBLIC%\Documents\DevExpress Demos 20.2\Components.NET Core Desktop Libraries\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 20.2\Components.NET Core Desktop Libraries\eXpressApp Framework\FeatureCenter by default. The ASP.NET Web Forms version of this demo is available online at https://demos.devexpress.com/XAF/FeatureCenter/.

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

Refer to the member list of the IModelMapSettings 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. This is done automatically for any List View that displays IMapsMarker objects. You can customize this behavior using the MapsAspNetModule.SetMapsEditorsAsDefault property.

If you use Google as the maps provider (used in ASP.NET applications when the IModelMapSettings.Provider property set to Google), specify the MapsAspNetModule.GoogleApiKey property in the WebApplication.cs (WebApplication.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.

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.

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

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