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="~/data/floorPlanProjection.js"></script> <script> function vectorMap_customizeTooltip(arg) { if(arg.layer.name === "rooms") return { text: "Square: " + arg.attribute("square") + " ft&#178" }; } </script>
using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult FloorPlan() { return View(); } [HttpGet] public object GetBuildingData() { return SampleData.BuildingData; } [HttpGet] public object GetRoomData() { return SampleData.RoomData; } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<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 = DevExpress.viz.map.projection({ 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.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<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; }