Your search did not match any results.

Vector Map - Floor Plan

This demo illustrates how you can use custom data in the VectorMap component. Visualized, the custom data constitutes a floor plan.

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&#178" }; } </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; }