MapPointer.SvgImage Property

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

Namespace: DevExpress.XtraMap

Assembly: DevExpress.XtraMap.v24.2.dll

Declaration

C#

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

VB.NET

<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#

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

VB.NET

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>