How to: Change the Map Marker Icon

• Aug 24, 2021
• 4 minutes to read

This topic describes how to access the dxMap widget directly using JavaScript code. This is for an application created according to the Use Raster Maps tutorial if you need to customize the widget options that are not mapped to properties of the IModelMapSettings node in the Model Editor. In this example, the markerIconSrc option specifying the custom icon to be used for the map marker is customized.

Change an Icon for All Markers

• Add the MarkerIconController View Controller to the ASP.NET module project.
• In the constructor, set the ViewController.TargetObjectType property to IMapsMarker and the ViewController.TargetViewType to ViewType.ListView.
• Override the OnViewControlsCreated method and access the WebMapsListEditor List Editor and its MapViewer control. This control exposes the MapViewer.ClientSideEvents property, which allows you to assign JavaScript handlers to the client-side events.
• Handle the MapViewerClientSideEvents.Customize client-side event to change the markerIconSrc path.

C#

using DevExpress.Persistent.Base;
using DevExpress.ExpressApp.Maps.Web;
// ...
public class MarkerIconController : ViewController {
    public MarkerIconController() {
        TargetObjectType = typeof(IMapsMarker);
        TargetViewType = ViewType.ListView;
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        WebMapsListEditor mapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
        if (mapsListEditor != null) {
            mapsListEditor.MapViewer.ClientSideEvents.Customize =
            "function(sender, map) { map.option('markerIconSrc', 'http://js.devexpress.com/Demos/RealtorApp/images/map-marker.png'); }";
        }
    }
}

VB.NET

Imports DevExpress.Persistent.Base
Imports DevExpress.ExpressApp.Maps.Web
' ...
Public Class MarkerIconController
    Inherits ViewController
    Public Sub New()
        TargetObjectType = GetType(IMapsMarker)
        TargetViewType = ViewType.ListView
    End Sub
    Protected Overrides Sub OnViewControlsCreated()
        MyBase.OnViewControlsCreated()
        Dim mapsListEditor As WebMapsListEditor = TryCast(CType(View, ListView).Editor, WebMapsListEditor)
        If mapsListEditor IsNot Nothing Then
            mapsListEditor.MapViewer.ClientSideEvents.Customize = _
"function(sender, map) { map.option('markerIconSrc', 'http://js.devexpress.com/Demos/RealtorApp/images/map-marker.png'); }"
        End If
    End Sub
End Class

The result is demonstrated in the image below.

Use an Individual Icon For Each Marker

Assume that you have the Store business object which implements IMapsMarker and exposes the IconPath property containing an icon URL.

To change an icon of each Store on a map, handle the MapViewerClientSideEvents.Customize client-side event of the MapViewer control. Use the MapViewerBase.CustomJSProperties event to serialize and pass markers data.

C#

public class MarkerIconController : ObjectViewController<ListView, Store> {
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();

        WebMapsListEditor webMapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
        if(webMapsListEditor != null) {
            webMapsListEditor.MapViewer.ClientSideEvents.Customize = GetCustomizeScript();
            webMapsListEditor.MapViewer.CustomJSProperties += MapViewer_CustomJSProperties;
        }
    }
    private void MapViewer_CustomJSProperties(object sender, DevExpress.Web.CustomJSPropertiesEventArgs e) {
        MapViewer mapViewer = sender as MapViewer;
        mapViewer.JSProperties["cpMarkerIcons"] = GetMarkerIcons(mapViewer.MapSettings);
    }
    private List<string> GetMarkerIcons(MapSettings mapSettings) {
        List<string> result = new List<string>();

        foreach(var marker in mapSettings.Markers)
            result.Add(GetIconPathForMarker(marker));
        return result;
    }
    private string GetCustomizeScript() {
        return @"function(sender, map) {{
                            var markerIcons = map.parent.cpMarkerIcons;
                            var markers = map.option('markers');
                            for(var markerIndex = 0; markerIndex < markers.length; markerIndex++) {{
                            var marker = markers[markerIndex];
                            var markerIcon = markerIcons[markerIndex];
                            marker.iconSrc = markerIcon;
                            }}
                            map.option('markers', markers);                           
            }}";
    }
}

VB.NET

Imports Microsoft.VisualBasic

Public Class MarkerIconController
    Inherits ObjectViewController(Of ListView, Store)

    Protected Overrides Sub OnViewControlsCreated()
        MyBase.OnViewControlsCreated()

        Dim webMapsListEditor As WebMapsListEditor = TryCast(CType(View, ListView).Editor, WebMapsListEditor)
        If webMapsListEditor IsNot Nothing Then
            webMapsListEditor.MapViewer.ClientSideEvents.Customize = GetCustomizeScript()
            AddHandler webMapsListEditor.MapViewer.CustomJSProperties, AddressOf MapViewer_CustomJSProperties
        End If
    End Sub
    Private Sub MapViewer_CustomJSProperties(ByVal sender As Object, ByVal e As DevExpress.Web.CustomJSPropertiesEventArgs)
        Dim mapViewer As MapViewer = TryCast(sender, MapViewer)
        mapViewer.JSProperties("cpMarkerIcons") = GetMarkerIcons(mapViewer.MapSettings)
    End Sub
    Private Function GetMarkerIcons(ByVal mapSettings As MapSettings) As List(Of String)
        Dim result As New List(Of String)()

        For Each marker In mapSettings.Markers
            result.Add(GetIconPathForMarker(marker))
        Next marker
        Return result
    End Function
    Private Function GetCustomizeScript() As String
        Return "function(sender, map) {{" & ControlChars.CrLf & _
"                          var markerIcons = map.parent.cpMarkerIcons;" & ControlChars.CrLf & _
"                          var markers = map.option('markers');" & ControlChars.CrLf & _
"                          for(var markerIndex = 0; markerIndex < markers.length; markerIndex++) {{" & ControlChars.CrLf & _
"                            var marker = markers[markerIndex];" & ControlChars.CrLf & _
"                            var markerIcon = markerIcons[markerIndex];" & ControlChars.CrLf & _
"                            marker.iconSrc = markerIcon;" & ControlChars.CrLf & _
"                          }}" & ControlChars.CrLf & _
"                          map.option('markers', markers);" & ControlChars.CrLf & _
"          }}"
    End Function
End Class