Your search did not match any results.

Vector Map - Pie Markers

This demo shows how to use markers of the «pie» type in the VectorMap. Values for pie markers are provided by the data field whose name is assigned to the dataField property.

Backend API
@(Html.DevExtreme().VectorMap() .ID("vector-map") .Layers(layers => { layers.Add() .DataSource(new JS("DevExpress.viz.map.sources.world")) .HoverEnabled(false); layers.Add() .Name("pies") .DataSource(d => d.StaticJson().Url(Url.Action("GetPieMarkers"))) .DataSourceOptions(dso => dso.Map("vectorMap_piesLayer_dataSource_map")) .ElementType(VectorMapMarkerType.Pie) .DataField("values") .MinSize(20) .MaxSize(40) .SizeGroups(new double[] { 0, 8000, 10000, 50000 }); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip("vectorMap_customizeTooltip") ) .Legends(l => l.Add() .Source(s => s .Layer("pies") .Grouping("color") ) .CustomizeText("vectorMap_piesLegend_customizeText") ) .Bounds(new double[] { -180, 85, 180, -60 }) ) <script src="~/data/names.js"></script> <script> function vectorMap_piesLayer_dataSource_map(item) { item.features=$.map(item.features, function(data) { var list = ["<span class='country'>" + data.country + "</span>", "&nbsp;"]; $.each(data.values, function(i, value) { if (value > 0) { list.push(names[i] + ": " + value + "%"); } }); return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { tooltip: list.join("\n"), values: data.values } }; } ); return item; } function vectorMap_customizeTooltip(arg) { if(arg.layer.type === "marker") { return { text: arg.attribute("tooltip") }; } } function vectorMap_piesLegend_customizeText(arg) { return names[arg.index]; } </script>
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult PieMarkers() { return View(); } [HttpGet] public object GetPieMarkers() { return SampleData.PieMarkersData; } } }
var names = ["Christian", "Muslim", "Unaffiliated", "Buddhist", "Jewish"];
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<object> PieMarkersData = new[] { new { type = "FeatureCollection", features = new[] { new { coordinates = new[] { 34.6, -5.1 }, values = new[] { 61.4, 35.2, 1.4, 0, 0 }, country = "Tanzania" }, new { coordinates = new[] { 18.8, 15 }, values = new[] { 40.6, 55.3, 2.5, 0, 0 }, country = "Chad" }, new { coordinates = new[] { 7.36, 9.97 }, values = new[] { 49.3, 48.8, 0.4, 0, 0 }, country = "Nigeria" }, new { coordinates = new[] { 135.61, -24.57 }, values = new[] { 67.3, 2.4, 24.2, 2.7, 0.5 }, country = "Australia" }, new { coordinates = new[] { 103.3, 34.85 }, values = new[] { 5.1, 1.8, 52.2, 18.2, 0 }, country = "China" }, new { coordinates = new[] { 139.5, 37 }, values = new[] { 1.6, 0.2, 57, 36.2, 0 }, country = "Japan" }, new { coordinates = new[] { 100.8, 15.9 }, values = new[] { 0.9, 5.5, 0.3, 93.2, 0 }, country = "Thailand" }, new { coordinates = new[] { 10.4, 51.4 }, values = new[] { 68.7, 5.8, 24.7, 0.3, 0.3 }, country = "Germany" }, new { coordinates = new[] { 100.8, 65.3 }, values = new[] { 73.3, 10, 16.2, 0.1, 0.2 }, country = "Russia" }, new { coordinates = new[] { -3.48, 40.36 }, values = new[] { 78.6, 2.1, 19, 0, 0.1 }, country = "Spain" }, new { coordinates = new[] { -78.01, 21.72 }, values = new[] { 59.2, 0, 23, 0, 0 }, country = "Cuba" }, new { coordinates = new[] { -63.7, -31.92 }, values = new[] { 85.2, 1, 12.2, 0.05, 0.5 }, country = "Argentina" }, new { coordinates = new[] { -110.53, 60.78 }, values = new[] { 69, 2.1, 23.7, 0.5, 0.3 }, country = "Canada" }, new { coordinates = new[] { -100.1, 40.14 }, values = new[] { 78.3, 0.9, 16.4, 1.2, 1.8 }, country = "United States" }, new { coordinates = new[] { 34.88, 31.16 }, values = new[] { 2, 18.6, 3.1, 0.3, 75.6 }, country = "Israel" } } } }; } }
#vector-map { height: 440px; } .country { font-size: 15px; font-weight: 500; }