DxMapMarker.IconUrl Property
Specifies the map marker’s icon URL.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.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.Bing" Zoom="18" Width="950px" Height="400px" MarkerClick="OnMapMarkerClick" >
<DxMapApiKeys Bing="@MapApiKeyProvider.GetBingProviderKey()" />
<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;
}
}
}
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.Bing" Width="100%" Height="600px">
<DxMapApiKeys Bing="@MapApiKeyProvider.GetBingProviderKey()" />
<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; }
}
}
See Also