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 { markers } from './data.js';
const sizeGroups = [0, 8000, 10000, 50000];
const bounds = [-180, 85, 180, -60];
export default function App() {
return (
<VectorMap
id="vector-map" bounds={bounds}>
<Layer
dataSource={mapsData.world}
hoverEnabled={false}>
</Layer>
<Layer
dataSource={markers}
name="bubbles"
elementType="bubble"
dataField="value"
minSize={20}
maxSize={40}
sizeGroups={sizeGroups}
opacity="0.8">
<Label enabled={false}></Label>
</Layer>
<Tooltip enabled={true}
customizeTooltip={customizeTooltip}
></Tooltip>
<Legend
markerShape="circle"
customizeItems={customizeItems}
customizeText={customizeText}>
<Source layer="bubbles" grouping="size"></Source>
</Legend>
<Tooltip enabled={true}
customizeTooltip={customizeTooltip} />
</VectorMap>
);
}
function customizeTooltip(arg) {
if (arg.layer.type === 'marker') {
return { text: arg.attribute('tooltip') };
}
}
function customizeText(arg) {
return ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
}
function customizeItems(items) {
return items.reverse();
}
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.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/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: 440px;
}
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: [44.43, 33.33],
text: 'Baghdad',
value: 7181
},
{
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: {
text: data.text,
value: data.value,
tooltip: `<b>${ data.text }</b>\n${ data.value }K`
}
};
})
};
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
}
});