Your search did not match any results.
Vector Map

Area with Labels and Two Legends

Documentation

The VectorMap widget 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.

Apply
Reset
import React from 'react'; import Map, { 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]; function customizeText(arg) { if(arg.index === 0) { return '< 0.5%'; } else if (arg.index === 5) { return '> 3%'; } else { return `${arg.start }% to ${ arg.end }%`; } } function customizeTooltip(arg) { return { text: arg.attribute('text') }; } function customizeMarkers(arg) { return ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; } function customizeItems(items) { return items.reverse(); } function customizeLayer(elements) { elements.forEach((element) => { let name = element.attribute('name'), population = populations[name]; if (population) { element.attribute('population', population); } }); } const bounds = [-180, 85, 180, -75]; const App = function() { return ( <Map 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} /> </Map> ); }; export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#vector-map { height: 700px; }
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 => { return { type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates }, properties: { value: data.value, text: data.text } }; }) };
System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/dist/js/vectormap-data/*': { esModule: true } }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme/dist/js/vectormap-data': 'npm:devextreme@19.2/dist/js/vectormap-data', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });