MapPointer.SvgImage Property

Gets or sets an SVG image assigned to the map pointer.

Assembly : DevExpress.XtraMap.v25.2.dll

Declaration

C#
VB.NET

csharp

[DefaultValue(null)]
public SvgImage SvgImage { get; set; }

<DefaultValue(Nothing)>
Public Property SvgImage As SvgImage

Property Value

Type	Default	Description
SvgImage	null

A vector image.

Example

The following example shows how to customize the map pushpin appearance.

Use the MapPointer.SvgImage property to specify the pushpin glyph. To define its size, use the MapPointer.SvgImageSize property.
To apply a specific color depending on the item state (“Selected”, “Highlighted”, “Normal”), use the MapPointer.SvgPaletteProvider property.
Set the Angle property to rotate the pushpin.
C#
VB.NET

csharp

using System;
using System.Drawing;
using System.Windows.Forms;
using DevExpress.Utils.Design;
using DevExpress.Utils.Svg;
using DevExpress.XtraMap;

private void Form1_Load(object sender, EventArgs e) {

    VectorItemsLayer vectorLayer = new VectorItemsLayer();
    mapControl1.Layers.Add(vectorLayer);

    MapItemStorage storage = new MapItemStorage();
    vectorLayer.Data = storage;

    vectorLayer.EnableSelection = true;
    vectorLayer.EnableHighlighting = true;

    MapPushpin pushpin = new MapPushpin();

    pushpin.Angle = 0.7854;
    pushpin.SvgImage = SvgImage.FromFile(GetRelativePath("arrow.svg"));
    pushpin.SvgImageSize = new Size(64, 64);
    pushpin.Location = new GeoPoint(47, -35);
    pushpin.SvgPaletteProvider = new SvgPaletteProvider();

    storage.Items.Add(pushpin);
}
public class SvgPaletteProvider : IMapSvgPaletteProvider {
    ISvgPaletteProvider IMapSvgPaletteProvider.GetSvgPalette(MapElementState state) {
        SvgPalette svgPalette = new SvgPalette();
        // .st0 is the name of the CSS class used in the pushpin's SVG image.
        if ((state & MapElementState.Highlighted) == MapElementState.Highlighted)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Yellow));
        if ((state & MapElementState.Selected) == MapElementState.Selected)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Green));
        if ((state & MapElementState.Normal) == MapElementState.Normal)
            svgPalette.Colors.Add(new SvgColor("st0", Color.Blue));
        return svgPalette;
    }
}

Imports System
Imports System.Drawing
Imports System.Windows.Forms
Imports DevExpress.Utils.Design
Imports DevExpress.Utils.Svg
Imports DevExpress.XtraMap

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)

    Dim vectorLayer As VectorItemsLayer = New VectorItemsLayer()
    mapControl1.Layers.Add(vectorLayer)
    Dim storage As MapItemStorage = New MapItemStorage()
    vectorLayer.Data = storage
    vectorLayer.EnableSelection = True
    vectorLayer.EnableHighlighting = True
    Dim pushpin As MapPushpin = New MapPushpin()
    pushpin.Angle = 0.7854
    pushpin.SvgImage = SvgImage.FromFile(GetRelativePath("arrow.svg"))
    pushpin.SvgImageSize = New Size(64, 64)
    pushpin.Location = New GeoPoint(47, -35)
    pushpin.SvgPaletteProvider = New SvgPaletteProvider()
    storage.Items.Add(pushpin)
End Sub

Public Class SvgPaletteProvider
    Implements IMapSvgPaletteProvider
    Private Function IMapSvgPaletteProvider_GetSvgPalette(state As MapElementState) As ISvgPaletteProvider Implements IMapSvgPaletteProvider.GetSvgPalette
        Dim svgPalette As SvgPalette = New SvgPalette()
        ' .st0 is the name of the CSS class used in the pushpin's SVG image.
        If (state And MapElementState.Highlighted) = MapElementState.Highlighted Then
            svgPalette.Colors.Add(New SvgColor("st0", Color.Yellow))
        End If
        If (state And MapElementState.Selected) = MapElementState.Selected Then
            svgPalette.Colors.Add(New SvgColor("st0", Color.Green))
        End If
        If (state And MapElementState.Normal) = MapElementState.Normal Then
            svgPalette.Colors.Add(New SvgColor("st0", Color.Blue))
        End If
        Return svgPalette
    End Function
End Class

The example above uses the SVG image (arrow.svg) with the following markup:

xml

<?xml version='1.0' encoding='UTF-8'?>
<svg viewBox="-4 -4 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Layer_1" transform="translate(-4, -4)" style="enable-background:new 0 0 32 32">
    <g id="Arrow2Up">
       <style type="text/css">
            .st0{fill:#B2B2B2;}
      </style>
      <polygon points="28,16 16,4 4,16 6.8,18.8 14,11.7 14,28 18,28 18,11.7 25.2,18.8" class="st0"/>
    </g>
  </g>
</svg>