How to: Change the Map Marker Icon

• Jun 25, 2021
• 2 minutes to read

XAF uses a default icon for map markers. This topic describes how to change this icon or specify different icons for each marker.

1. 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.

2. Add the ObjectViewController<ViewType, ObjectType> descendant to the ASP.NET Web Forms 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.

3. 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