Bubble Markers - React Vector Map (2024)

TS JS

See Also

Backend API

import React from 'react';import VectorMap, { ITooltipProps, 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.ts';const sizeGroups = [0, 8000, 10000, 50000];const bounds = [-180, 85, 180, -60];const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('tooltip') }; } return null;};const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];const customizeItems = (items: any[]) => items.reverse();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> );}

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];const customizeTooltip = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('tooltip') }; } return null;};const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];const customizeItems = (items) => items.reverse();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> );}

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);

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) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates, }, properties: { text: data.text, value: data.value, tooltip: `<b>${data.text}</b>\n${data.value}K`, }, })),};

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/23.2.5/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: 440px;}