DxMapMarker.IconUrl Property

Specifies the map marker’s icon URL.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue("")]
[Parameter]
public string IconUrl { get; set; }

Property Value

Type	Default	Description
String	String.Empty	The icon URL.

Remarks

Use the IconUrl property to specify a custom icon for the marker. You can use the MarkerIconUrl property to set a common icon for every marker on the map.

<DxMap Provider="MapProvider.Azure"
       Zoom="18"
       Width="950px"
       Height="400px"
       MarkerClick="OnMapMarkerClick" >
    <DxMapApiKeys Azure="@MapApiKeyProvider.GetAzureProviderKey()" />
    <DxMapMarkers>
        <DxMapMarker MarkerId="BusStation" IconUrl="images/bus-station-mark.png" >
            <DxMapMarkerLocation GeoPosition="51.481633,-0.008281" />
        </DxMapMarker>
        <DxMapMarker MarkerId="GiftShop" IconUrl="images/shop-mark.png">
            <DxMapMarkerLocation GeoPosition="51.480889,-0.009259" />
        </DxMapMarker>
    </DxMapMarkers>
    <DxMapRoutes>
        <DxMapRoute Color="red" Weight="9" Mode="MapRouteMode.Walking">
            <DxMapRouteLocations>
                <DxMapRouteLocation GeoPosition="51.481633,-0.008281" />
                <DxMapRouteLocation GeoPosition="51.481186,-0.009107" />
                <DxMapRouteLocation GeoPosition="51.480889,-0.009259" />
            </DxMapRouteLocations>
        </DxMapRoute>
    </DxMapRoutes>
</DxMap>
@code {
    void OnMapMarkerClick(MapMarkerClickEventArgs e) {
        switch(e.Marker.MarkerId) {
            case "BusStation":
                ShowBusStationInformation();
                break;
            case "GiftShop":
                ShowShopInformation();
                break;
        }
    }
    // ...
}

Run Demo: Map Markers

Create Icons Dynamically

You can use Data URLs to generate SVG images dynamically. The following code sample rotates the marker icon to point at the next marker.

<DxMap ControlsVisible="true"
       Zoom="14"
       Provider="MapProvider.Azure"
       Width="100%"
       Height="600px">
    <DxMapApiKeys Azure="@MapApiKeyProvider.GetAzureProviderKey()" />
    <DxMapMarkers>
        @foreach (MarkerInfo markerInfo in Markers) {
            string url = GetIcon(markerInfo.RotationAngle);
            string geoPosition = $"{markerInfo.GeoPositionX} {markerInfo.GeoPositionY}";
            <DxMapMarker IconUrl="@url">
                <DxMapMarkerLocation GeoPosition="@geoPosition" />
                <DxMapMarkerTooltip Text="@markerInfo.Text" />
            </DxMapMarker>
        }
    </DxMapMarkers>
</DxMap>

@code {
    List<MarkerInfo> Markers = new List<MarkerInfo> {
        new MarkerInfo {Id = 1, GeoPositionX = 51.50585, GeoPositionY = -0.08687, RotationAngle = 110, Text = "London Bridge"},
        new MarkerInfo {Id = 2, GeoPositionX = 51.50485, GeoPositionY = -0.08374, RotationAngle = 90, Text = "Point 2"},
        new MarkerInfo {Id = 3, GeoPositionX = 51.50501, GeoPositionY = -0.07842, RotationAngle = 120, Text = "Queen Walk"},
        new MarkerInfo {Id = 4, GeoPositionX = 51.50434, GeoPositionY = -0.07611, RotationAngle = 30, Text = "Tower Bridge"}
    };
    string GetIcon(int angle) {
        string svgTemplate = 
            @"<svg xmlns=""http://www.w3.org/2000/svg"" width=""26"" height=""26"" viewBox=""0 0 30 30"">
                <circle cx=""15"" cy=""15"" r=""10"" stroke=""red"" fill=""transparent"" stroke-width=""3""/>
                <path d=""M11,21 l4-13 l4,13 l-4-1z"" fill=""red"" transform=""rotate({0} 15 15)"" />
            </svg>";
        string svgContent = string.Format(svgTemplate, angle);
        string urlEncodedSvg = Uri.EscapeDataString(svgContent);
        string dataUrl = $"data:image/svg+xml,{urlEncodedSvg}";
        return dataUrl;
    }
    public class MarkerInfo {
        public int Id { get; set; }
        public double GeoPositionX { get; set; }
        public double GeoPositionY { get; set; }
        public string Text { get; set; }
        public int RotationAngle { get; set; }
    }
}