Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Vector Map

Floor Plan

Documentation

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

@(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 Newtonsoft.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(JsonConvert.SerializeObject(SampleData.BuildingData), "application/json"); } [HttpGet] public ContentResult GetRoomData() { return Content(JsonConvert.SerializeObject(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; }