@model IEnumerable<DevExtreme.MVC.Demos.Models.StateData>
@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Bounds(new double[] { -118, 55, -80, 23 })
.Layers(l =>
{ l.Add().DataSource(new JS("DevExpress.viz.map.sources.usa")); })
.CommonAnnotationSettings(c =>
c.Type(AnnotationType.Custom)
.Template(@<text>
<svg class='annotation'>
<image href="<%-getImagePath(data)%>" width="60" height="40" />
<rect class="border" x="0" y="0" />
<text x="70" y="25" class="state"><%- data.Name %></text>
<text x="0" y="60">
<tspan class="caption">Capital:</tspan><tspan class="capital" dx="5"><%- data.Capital %></tspan><tspan dy="14" x="0" class="caption">Population:</tspan><tspan class="population" dx="5"><%- formatNumber(data.Population) %></tspan><tspan dy="14" x="0" class="caption">Area:</tspan><tspan class="area" dx="5"><%- formatNumber(data.Area) %></tspan><tspan dx="5">km</tspan><tspan class="sup" dy="-2">2</tspan>
</text>
</svg>
</text>))
.Annotations(a =>
{ foreach (var state in Model)
{
if (state.OffsetX.HasValue && state.OffsetY.HasValue)
{
a.Add().Coordinates(state.Coordinates)
.Data(state.Data)
.OffsetX(state.OffsetX.Value)
.OffsetY(state.OffsetY.Value);
}
else {
a.Add().Coordinates(state.Coordinates)
.Data(state.Data);
}
}
})
)
<script>
var formatNumber = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format;
function getImagePath(data) {
return '../../Content/Images/flags/' + data.Name.replace(/\s/, "") + ".svg"
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult CustomAnnotations() {
return View(SampleData.StatesData);
}
}
}
using System;
namespace DevExtreme.MVC.Demos.Models {
public class StateData {
public double[] Coordinates { get; set; }
public double? OffsetX { get; set; }
public double? OffsetY { get; set; }
public object Data { get; set; }
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<StateData> StatesData = new[] {
new StateData {
Coordinates = new double[] {-75.4999, 43.00035},
Data = new {Name = "New York", Population = 19746227, Capital = "Albany", Area = 141297}
},
new StateData {
Coordinates = new double[] {-89, 40},
OffsetX = -100,
OffsetY = -80,
Data = new {Name = "Illinois", Population = 12880580, Capital = "Springfield", Area = 149995}
},
new StateData {
Coordinates = new double[] {-81.760254, 27.994402},
Data = new {Name = "Florida", Population = 19893297, Capital = "Tallahassee", Area = 170312}
},
new StateData {
Coordinates = new double[] {-100, 31},
Data = new {Name = "Texas", Population = 26956958, Capital = "Austin", Area = 695662}
},
new StateData {
Coordinates = new double[] {-119.417931, 36.778259},
Data = new {Name = "California", Population = 38802500, Capital = "Sacramento", Area = 423967}
}
};
}
}
#vector-map {
height: 440px;
}
.annotation {
font-size: 12px;
}
.border {
width: 60px;
height: 40px;
stroke: rgba(191, 191, 191, 0.25);
stroke-width: 1px;
fill: transparent;
}
.state {
font-weight: 500;
font-size: 14px;
}
.caption {
font-weight: 500;
}
.sup {
font-size: 0.8em;
}