IMapSvgPaletteProvider Interface

The interface that should be implemented by classes that are SVG palette providers.

Namespace: DevExpress.XtraMap

Assembly: DevExpress.XtraMap.v20.1.dll

NuGet Package: DevExpress.Win.Map

Declaration

C#

public interface IMapSvgPaletteProvider

VB.NET

Public Interface IMapSvgPaletteProvider

Related API Members

The following members return IMapSvgPaletteProvider objects:

• MapPointer.SvgPaletteProvider

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
    Inherits IMapSvgPaletteProvider
    Private Function GetSvgPalette(ByVal state As MapElementState) As ISvgPaletteProvider
        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) Is MapElementState.Highlighted Then svgPalette.Colors.Add(New SvgColor("st0", Color.Yellow))
        If (state And MapElementState.Selected) Is MapElementState.Selected Then svgPalette.Colors.Add(New SvgColor("st0", Color.Green))
        If (state And MapElementState.Normal) Is MapElementState.Normal Then svgPalette.Colors.Add(New SvgColor("st0", Color.Blue))
        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>