Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.MaxZoomFactor(4)
.Projection(new JS("floorPlanProjection"))
.Layers(layers => {
layers.Add()
.HoverEnabled(false)
.DataSource(d => d.StaticJson().Url(Url.Action("GetBuildingData")))
.Name("building");
layers.Add()
.Color("transparent")
.BorderWidth(1)
.Label(l => l
.Enabled(true)
.DataField("name")
)
.DataSource(d => d.StaticJson().Url(Url.Action("GetRoomData")))
.Name("rooms");
})
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
)
<script src="~/Scripts/data/floorPlanProjection.js"></script>
<script>
function vectorMap_customizeTooltip(arg) {
if(arg.layer.name === "rooms")
return { text: "Square: " + arg.attribute("square") + " ft²" };
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult FloorPlan() {
return View();
}
[HttpGet]
public ContentResult GetBuildingData() {
return Content(JsonSerializer.Serialize(SampleData.BuildingData), "application/json");
}
[HttpGet]
public ContentResult GetRoomData() {
return Content(JsonSerializer.Serialize(SampleData.RoomData), "application/json");
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly object BuildingData = new[] {
new {
type = "FeatureCollection",
features = new[] {
new {
type = "Feature",
geometry = new {
type = "Polygon",
coordinates = new[] {
new[] {
new[] { 10, -80 },
new[] { -80, -80 },
new[] { -80, 80 },
new[] { 40, 80 },
new[] { 40, -20 },
new[] { 100, -20 },
new[] { 100, -80 },
new[] { 30, -80 },
new[] { 30, -74 },
new[] { 34, -74 },
new[] { 34, -68 },
new[] { 40, -68 },
new[] { 40, -74 },
new[] { 94, -74 },
new[] { 94, -26 },
new[] { 40, -26 },
new[] { 40, -60 },
new[] { 34, -60 },
new[] { 34, 74 },
new[] { -74, 74 },
new[] { -74, 30 },
new[] { 10, 30 },
new[] { 10, 24 },
new[] { -74, 24 },
new[] { -74, -24 },
new[] { 10, -24 },
new[] { 10, -30 },
new[] { -74, -30 },
new[] { -74, -74 },
new[] { 10, -74 },
}
}
}
}
}
}
};
}
}
var floorPlanProjection = {
to: function(coordinates) {
return [coordinates[0]/100, coordinates[1]/100];
},
from: function(coordinates) {
return [coordinates[0]*100, coordinates[1]*100];
}
};
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly object RoomData = new[] {
new {
type = "FeatureCollection",
features = new[] {
new {
type = "Feature",
properties = new {
name = "Room 1",
square = 576
},
geometry = new {
type = "Polygon",
coordinates = new[] {
new[] {
new[] { -74, -30 },
new[] { 34, -30 },
new[] { 34, -74 },
new[] { -74, -74 }
}
}
}
},
new {
type = "Feature",
properties = new {
name = "Room 2",
square = 600
},
geometry = new {
type = "Polygon",
coordinates = new[] {
new[] {
new[] { -74, 24 },
new[] { 34, 24 },
new[] { 34, -24 },
new[] { -74, -24 }
}
}
}
},
new {
type = "Feature",
properties = new {
name = "Room 3",
square = 540
},
geometry = new {
type = "Polygon",
coordinates = new[] {
new[] {
new[] { -74, 74 },
new[] { 34, 74 },
new[] { 34, 30 },
new[] { -74, 30 }
}
}
}
},
new {
type = "Feature",
properties = new {
name = "Room 4",
square = 288
},
geometry = new {
type = "Polygon",
coordinates = new[] {
new[] {
new[] { 40, -26 },
new[] { 94, -26 },
new[] { 94, -74 },
new[] { 40, -74 }
}
}
}
}
}
}
};
}
}
#vector-map {
height: 400px;
}