How to: Change the Map Marker Icon

• Oct 22, 2020
• 4 minutes to read

XAF uses a default icon for map markers. To change this icon or specify different icons for each marker, follow the instructions from the Extend a Business Object Class section and implement one of the following approaches:

• ASP.NET-specific approach
• Mobile-specific approach

Extend a Business Object Class

Extend your business class that implements the IMapsMarker interface with a string property. This property stores a link to an individual or common marker icon.

The following code demonstrates how to extend the Location class with the IndividualMarkerIcon or CommonMarkerIcon string property:

C#

using DevExpress.Persistent.Base;
using DevExpress.Persistent.BaseImpl;
// ...
public class Location : BaseObject, IMapsMarker {
    // ...
    public string IndividualMarkerIcon { get; set; }
    // or
    public string CommonMarkerIcon { 
        get { 
            return "http://js.devexpress.com/Demos/RealtorApp/images/map-marker.png"; 
        } 
    }
}

VB.NET

Imports DevExpress.Persistent.Base
Imports DevExpress.Persistent.BaseImpl
' ...
Public Class Location
    Inherits BaseObject
    Implements IMapsMarker
    ' ...
    Public Property IndividualMarkerIcon() As String
    ' or
    Public ReadOnly Property CommonMarkerIcon() As String
        Get
            Return "http://js.devexpress.com/Demos/RealtorApp/images/map-marker.png"
        End Get
    End Property
End Class

Tip

The full Location class code is available in the Use Raster Maps topic.

ASP.NET-Specific Approach

1. Add the ObjectViewController<ViewType, ObjectType> descendant to the ASP.NET module project. Set the ViewType parameter to ListView and the ObjectType parameter to Location.

   If you have several Location‘s List Views, specify the TargetViewId property in the Controller’s constructor.

2. In the OnViewControlsCreated overridden method, access the WebMapsListEditor. Set the List Editor control’s MapSettings.IconSrcPropertyName property to the name of the property that contains a link to a marker icon.

The Controller’s code is demonstrated below:

C#

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Maps.Web;
    // ...
    public class MarkerIconController : ObjectViewController<ListView, Location> {
        public MarkerIconController () {
            TargetViewId = "Location_ListView_Map";
        }
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            WebMapsListEditor webMapsListEditor = View.Editor as WebMapsListEditor;
            if(webMapsListEditor != null) {
                // set an individual marker icon for each Location
                webMapsListEditor.MapViewer.MapSettings.IconSrcPropertyName = nameof(Location.IndividualMarkerIcon);
                // or 
                // set a common marker icon for all Locations
                webMapsListEditor.MapViewer.MapSettings.IconSrcPropertyName = nameof(Location.CommonMarkerIcon);
            }
        }
    }

VB.NET

    Imports DevExpress.ExpressApp
    Imports DevExpress.ExpressApp.Maps.Web
    ' ...
    Public Class MarkerIconController
        Inherits ObjectViewController(Of ListView, Location)
        Public Sub New()
            TargetViewId = "Location_ListView_Map"
        End Sub
        Protected Overrides Sub OnViewControlsCreated()
            MyBase.OnViewControlsCreated()
            Dim webMapsListEditor As WebMapsListEditor = TryCast(View.Editor, WebMapsListEditor)
            If webMapsListEditor IsNot Nothing Then
                ' set an individual marker icon for each Location
                webMapsListEditor.MapViewer.MapSettings.IconSrcPropertyName = NameOf(Location.IndividualMarkerIcon)
                ' or
                ' set a common marker icon for all Locations
                webMapsListEditor.MapViewer.MapSettings.IconSrcPropertyName = NameOf(Location.CommonMarkerIcon)
            End If
        End Sub
    End Class

Mobile-Specific Approach

1. Add the ObjectViewController<ViewType, ObjectType> descendant to the Mobile module project. Set the ViewType parameter to ListView and the ObjectType parameter to Location.

   If you have several Location‘s List Views, specify the TargetViewId property in the Controller’s constructor.

2. In the OnViewControlsCreated overridden method, access the MobileMapsListEditor. Set the List Editor control’s Map.IconSrcPropertyName property to the name of the property that contains a link to a marker icon.

The Controller’s code is demonstrated below:

C#

    using DevExpress.ExpressApp;
    using DevExpress.ExpressApp.Maps.Mobile.Editors;
    //...
    public class IndividualMarkerIconController : ObjectViewController<ListView, Location> {
        public MarkerIconController () {
            TargetViewId = "Location_ListView_Map";
        }
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            MobileMapsListEditor mobileMapsListEditor = View.Editor as MobileMapsListEditor;
            if(mobileMapsListEditor != null) {
                // set an individual marker icon for each Location
                mobileMapsListEditor.MapViewer.IconSrcPropertyName = nameof(Location.IndividualMarkerIcon);
                // or
                // set a common marker icon for all Locations
                mobileMapsListEditor.MapViewer.IconSrcPropertyName = nameof(Location.CommonMarkerIcon);
            }
        }
    }

VB.NET

    Imports DevExpress.ExpressApp
    Imports DevExpress.ExpressApp.Maps.Mobile.Editors
    '...
    Public Class IndividualMarkerIconController
        Inherits ObjectViewController(Of ListView, Location)
        Public Sub New()
            TargetViewId = "Location_ListView_Map"
        End Sub
        Protected Overrides Sub OnViewControlsCreated()
            MyBase.OnViewControlsCreated()
            Dim mobileMapsListEditor As MobileMapsListEditor = TryCast(View.Editor, MobileMapsListEditor)
            If mobileMapsListEditor IsNot Nothing Then
                ' set an individual marker icon for each Location
                mobileMapsListEditor.MapViewer.IconSrcPropertyName = NameOf(Location.IndividualMarkerIcon)
                ' or
                ' set a common marker icon for all Locations
                mobileMapsListEditor.MapViewer.IconSrcPropertyName = NameOf(Location.CommonMarkerIcon)
            End If
        End Sub
    End Class