Your search did not match any results.
Vector Map

Floor Plan

Documentation
This demo illustrates how you can use custom data in the VectorMap widget. Visualized, the custom data constitutes a floor plan.
Copy to Codepen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.vectorMapOptions = { 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&#178" }; } } }; });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/17.1.3/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="vector-map" dx-vector-map="vectorMapOptions"></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] ]] } } ] };