JavaScript/jQuery Vector Map - Floor Plan

This demo illustrates how you can use custom data in the JavaScript VectorMap component. Visualized, the custom data constitutes a floor plan.

Backend API

$(() => { $('#vector-map').dxVectorMap({ maxZoomFactor: 4, projection: { to(coordinates) { return [coordinates[0] / 100, coordinates[1] / 100]; }, from(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(arg) { if (arg.layer.name === 'rooms') { return { text: `Square: ${arg.attribute('square')} ft&#178` }; } return null; }, }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></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 { height: 400px; }

const 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], ]], }, }, ], }; const 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], ]], }, }, ], };