DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Area with Labels and Two Legends

The VectorMap component allows you to use color and size indicators to better illustrate the values associated with areas/markers. Use map legends to provide additional information on colors and marker size.

Backend API
import React from 'react'; import VectorMap, { ILayerProps, ILegendProps, ITooltipProps, Label, Layer, Legend, Source, Tooltip, } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { populations, markers } from './data.ts'; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const sizeGroups = [0, 8000, 10000, 50000]; const bounds = [-180, 85, 180, -75]; const customizeText = (arg: { index: number; start: any; end: any; }) => { if (arg.index === 0) { return '< 0.5%'; } if (arg.index === 5) { return '> 3%'; } return `${arg.start}% to ${arg.end}%`; }; const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => ({ text: arg.attribute('text'), }); const customizeMarkers: ILegendProps['customizeText'] = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; const customizeItems: ILegendProps['customizeItems'] = (items) => items.reverse(); const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { const name = element.attribute('name'); const population = populations[name]; if (population) { element.attribute('population', population); } }); }; export default function App() { return ( <VectorMap id="vector-map" bounds={bounds}> <Layer dataSource={mapsData.world} name="areas" palette="Violet" colorGroups={colorGroups} colorGroupingField="population" customize={customizeLayer}> <Label enabled={true} dataField="name"></Label> </Layer> <Layer dataSource={markers} name="markers" elementType="bubble" dataField="value" sizeGroups={sizeGroups} opacity={0.8}> <Label enabled={false}></Label> </Layer> <Legend title="World Population<br/>Percentages" horizontalAlignment="left" verticalAlignment="bottom" customizeItems={customizeItems} customizeText={customizeText}> <Source layer="areas" grouping="color"></Source> </Legend> <Legend title="City Population" markerShape="circle" horizontalAlignment="right" verticalAlignment="bottom" customizeItems={customizeItems} customizeText={customizeMarkers}> <Source layer="markers" grouping="size"></Source> </Legend> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> </VectorMap> ); }
import React from 'react'; import VectorMap, { Label, Layer, Legend, Source, Tooltip, } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { populations, markers } from './data.js'; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const sizeGroups = [0, 8000, 10000, 50000]; const bounds = [-180, 85, 180, -75]; const customizeText = (arg) => { if (arg.index === 0) { return '< 0.5%'; } if (arg.index === 5) { return '> 3%'; } return `${arg.start}% to ${arg.end}%`; }; const customizeTooltip = (arg) => ({ text: arg.attribute('text'), }); const customizeMarkers = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; const customizeItems = (items) => items.reverse(); const customizeLayer = (elements) => { elements.forEach((element) => { const name = element.attribute('name'); const population = populations[name]; if (population) { element.attribute('population', population); } }); }; export default function App() { return ( <VectorMap id="vector-map" bounds={bounds} > <Layer dataSource={mapsData.world} name="areas" palette="Violet" colorGroups={colorGroups} colorGroupingField="population" customize={customizeLayer} > <Label enabled={true} dataField="name" ></Label> </Layer> <Layer dataSource={markers} name="markers" elementType="bubble" dataField="value" sizeGroups={sizeGroups} opacity={0.8} > <Label enabled={false}></Label> </Layer> <Legend title="World Population<br/>Percentages" horizontalAlignment="left" verticalAlignment="bottom" customizeItems={customizeItems} customizeText={customizeText} > <Source layer="areas" grouping="color" ></Source> </Legend> <Legend title="City Population" markerShape="circle" horizontalAlignment="right" verticalAlignment="bottom" customizeItems={customizeItems} customizeText={customizeMarkers} > <Source layer="markers" grouping="size" ></Source> </Legend> <Tooltip enabled={true} customizeTooltip={customizeTooltip} /> </VectorMap> ); }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const populations = { China: 19, India: 17.4, 'United States': 4.44, Indonesia: 3.45, Brazil: 2.83, Nigeria: 2.42, Bangladesh: 2.18, Russia: 2.04, Japan: 1.77, Mexico: 1.67, Philippines: 1.39, Vietnam: 1.25, Ethiopia: 1.23, Egypt: 1.21, Germany: 1.13, Turkey: 1.07, 'Democratic Republic of the Congo': 0.94, France: 0.92, Thailand: 0.9, 'United Kingdom': 0.89, Italy: 0.85, Burma: 0.84, 'South Africa': 0.74, 'South Korea': 0.7, Colombia: 0.66, Spain: 0.65, Tanzania: 0.63, Kenya: 0.62, Ukraine: 0.6, Argentina: 0.59, Algeria: 0.54, Poland: 0.54, Sudan: 0.52, Canada: 0.49, Uganda: 0.49, Morocco: 0.46, Uzbekistan: 0.43, }; export const markers = { type: 'FeatureCollection', features: [ { coordinates: [-74, 40.7], text: 'New York City', value: 8406, }, { coordinates: [100.47, 13.75], text: 'Bangkok', value: 8281, }, { coordinates: [37.62, 55.75], text: 'Moscow', value: 12111, }, { coordinates: [121.5, 31.2], text: 'Shanghai', value: 24150, }, { coordinates: [-43.18, -22.9], text: 'Rio de Janeiro', value: 6429, }, { coordinates: [31.23, 30.05], text: 'Cairo', value: 8922, }, { coordinates: [28.95, 41], text: 'Istanbul', value: 14160, }, { coordinates: [127, 37.55], text: 'Seoul', value: 10388, }, { coordinates: [139.68, 35.68], text: 'Tokyo', value: 9071, }, { coordinates: [103.83, 1.28], text: 'Singapore', value: 5399, }, { coordinates: [30.3, 59.95], text: 'Saint Petersburg', value: 5131, }, { coordinates: [28.03, -26.2], text: 'Johannesburg', value: 4434, }, { coordinates: [144.95, -37.8], text: 'Melbourne', value: 4252, }, ].map((data) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates, }, properties: { value: data.value, text: data.text, }, })), };
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, 'devextreme-dist/js/vectormap-data/*': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.js', 'devextreme-dist/js/vectormap-data': 'npm:devextreme-dist@24.1.3/js/vectormap-data', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: 'json', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const populations = { China: 19, India: 17.4, 'United States': 4.44, Indonesia: 3.45, Brazil: 2.83, Nigeria: 2.42, Bangladesh: 2.18, Russia: 2.04, Japan: 1.77, Mexico: 1.67, Philippines: 1.39, Vietnam: 1.25, Ethiopia: 1.23, Egypt: 1.21, Germany: 1.13, Turkey: 1.07, 'Democratic Republic of the Congo': 0.94, France: 0.92, Thailand: 0.9, 'United Kingdom': 0.89, Italy: 0.85, Burma: 0.84, 'South Africa': 0.74, 'South Korea': 0.7, Colombia: 0.66, Spain: 0.65, Tanzania: 0.63, Kenya: 0.62, Ukraine: 0.6, Argentina: 0.59, Algeria: 0.54, Poland: 0.54, Sudan: 0.52, Canada: 0.49, Uganda: 0.49, Morocco: 0.46, Uzbekistan: 0.43, }; export const markers = { type: 'FeatureCollection', features: [ { coordinates: [-74, 40.7], text: 'New York City', value: 8406, }, { coordinates: [100.47, 13.75], text: 'Bangkok', value: 8281, }, { coordinates: [37.62, 55.75], text: 'Moscow', value: 12111, }, { coordinates: [121.5, 31.2], text: 'Shanghai', value: 24150, }, { coordinates: [-43.18, -22.9], text: 'Rio de Janeiro', value: 6429, }, { coordinates: [31.23, 30.05], text: 'Cairo', value: 8922, }, { coordinates: [28.95, 41], text: 'Istanbul', value: 14160, }, { coordinates: [127, 37.55], text: 'Seoul', value: 10388, }, { coordinates: [139.68, 35.68], text: 'Tokyo', value: 9071, }, { coordinates: [103.83, 1.28], text: 'Singapore', value: 5399, }, { coordinates: [30.3, 59.95], text: 'Saint Petersburg', value: 5131, }, { coordinates: [28.03, -26.2], text: 'Johannesburg', value: 4434, }, { coordinates: [144.95, -37.8], text: 'Melbourne', value: 4252, }, ].map((data) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates, }, properties: { value: data.value, text: data.text, }, })), };
<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#vector-map { height: 700px; }