Floor Plan
Documentation
This demo illustrates how you can use custom data in the VectorMap widget. Visualized, the custom data constitutes a floor plan.
jQuery
AngularJS
Angular
ASP.NET MVC
ASP.NET Core
$(function(){
$("#vector-map").dxVectorMap({
maxZoomFactor: 4,
projection: DevExpress.viz.map.projection({
to: function (coordinates) {
return [coordinates[0] / 100, coordinates[1] / 100];
},
from: function (coordinates) {
return [coordinates[0] * 100, coordinates[1] * 100];
}
}),
layers: [{
hoverEnabled: false,
dataSource: buildingData,
name: "building"
}, {
color: "transparent",
borderWidth: 1,
label: {
enabled: true,
dataField: "name"
},
dataSource: roomsData,
name: "rooms"
}],
tooltip: {
enabled: true,
customizeTooltip: function (arg) {
if(arg.layer.name === "rooms")
return { text: "Square: " + arg.attribute("square") + " ft²" };
}
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.1.6/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type ="text/css" href ="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="vector-map"></div>
</div>
</body>
</html>
#vector-map {
width: 100%;
height: 400px;
display: block;
}
var buildingData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[
[10, -80],
[-80, -80],
[-80, 80],
[40, 80],
[40, -20],
[100, -20],
[100, -80],
[30, -80],
[30, -74],
[34, -74],
[34, -68],
[40, -68],
[40, -74],
[94, -74],
[94, -26],
[40, -26],
[40, -60],
[34, -60],
[34, 74],
[-74, 74],
[-74, 30],
[10, 30],
[10, 24],
[-74, 24],
[-74, -24],
[10, -24],
[10, -30],
[-74, -30],
[-74, -74],
[10, -74]
]]
}
}
]
};
var roomsData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
name: "Room 1",
square: 576
},
geometry: {
type: "Polygon",
coordinates: [[
[-74, -30],
[34, -30],
[34, -74],
[-74, -74]
]]
}
}, {
type: "Feature",
properties: {
name: "Room 2",
square: 600
},
geometry: {
type: "Polygon",
coordinates: [[
[-74, 24],
[34, 24],
[34, -24],
[-74, -24]
]]
}
}, {
type: "Feature",
properties: {
name: "Room 3",
square: 540
},
geometry: {
type: "Polygon",
coordinates: [[
[-74, 74],
[34, 74],
[34, 30],
[-74, 30]
]]
}
}, {
type: "Feature",
properties: {
name: "Room 4",
square: 288
},
geometry: {
type: "Polygon",
coordinates: [[
[40, -26],
[94, -26],
[94, -74],
[40, -74]
]]
}
}
]
};