-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
-
Grouping
-
Customization
-
Html Editor (CTP)
-
Diagram (CTP)
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
-
Editors
- Overview
- Autocomplete
- Calendar
- Check Box
- Color Box
-
Date Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Styling Mode
-
Forms and Multi-Purpose
- Overview
- Box
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Responsive Box
- Scroll View
- Slider
-
File Management
-
File Manager (CTP)
-
File Uploader
-
-
Actions and Lists
- Overview
-
Action Sheet
-
Button
- Floating Action Button
- Drop Down Button
-
Context Menu
-
Gallery
-
List
-
Lookup
-
Tile View
-
Maps
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Floor Plan
Documentation
This demo illustrates how you can use custom data in the VectorMap widget. Visualized, the custom data constitutes a floor plan.
Was this demo helpful?
Thank you!
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
x
Send Feedback
Thank you!
We appreciate your feedback.
We appreciate your feedback.
The source code for the React version of this demo will be available soon.
$(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.4.1/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/19.1.7/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.7/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]
]]
}
}
]
};