How to: Customize the Vector Map Palette
- 2 minutes to read
This topic describes how to directly access the dxVectorMap widget using JavaScript code. This may be required if you need to customize the widget options that are not mapped to properties of the IModelVectorMapSettings node in the Model Editor. In this example, the custom palette is applied to map areas (in the Model Editor, you can only apply predefined palettes listed in the VectorMapPalette enumeration).
Here, it is assumed that you have an application created according to the Display Areas on a Vector Map tutorial.
Add the VectorMapPaletteController View Controller to the ASP.NET module project. In the constructor, set the ViewController.TargetObjectType property to IAreaInfo and the ViewController.TargetViewType to ViewType.ListView. Override the OnViewControlsCreated method and access the WebVectorMapsListEditor List Editor and its VectorMapViewer control. This control exposes the VectorMapViewer.ClientSideEvents property, which allows you to assign JavaScript handlers to the client-side events. Handle the VectorMapViewerClientSideEvents.Customize client-side event in order to create and apply a custom palette.
using DevExpress.ExpressApp;
using DevExpress.Persistent.Base;
using DevExpress.ExpressApp.Maps.Web;
// ...
public class VectorMapPaletteController : ViewController {
public VectorMapPaletteController() {
TargetObjectType = typeof(IAreaInfo);
TargetViewType = ViewType.ListView;
}
protected override void OnViewControlsCreated() {
base.OnViewControlsCreated();
WebVectorMapsListEditor vectorMapsListEditor = ((ListView)View).Editor as WebVectorMapsListEditor;
vectorMapsListEditor.VectorMapViewer.ClientSideEvents.Customize =
@"function(sender, vectorMap) {
var myPalette = {
gradientSet: ['#78b6d9', '#eeba69']
};
DevExpress.viz.registerPalette('myCustomPalette', myPalette);
vectorMap.option('areaSettings.palette', 'myCustomPalette');
}";
}
}