How to: Change the Map Marker Icon

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:

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:

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

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

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:

    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);
            }
        }
    }
See Also