Vector Map ▸ 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 System.Text.Json;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class VectorMapController : Controller {

        public ActionResult FloorPlan() {
            return View();
        }

    }
}

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;
}