Search results

Bubble in React Maps component

03 Dec 2021 / 6 minutes to read

Bubbles in the Maps control represent the underlying data values of the Maps. It can be scattered throughout the Maps shapes that contain values in the data source. Bubbles are enabled by setting the visible property of bubbleSettings to true. To add bubbles to the Maps, bind the data source to the dataSource property of BubbleDirective and set the field name, that contains the numerical data, in the data source to the valuePath property.

Copied to clipboard
export let world_map = // paste the World map from World.json GeoJSON file.
Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
            <MapsComponent id="maps">
            <Inject services={[Bubble]}/>
                <LayersDirective>
                    <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                        <BubblesDirective>
                            <BubbleDirective visible={true} valuePath="population" dataSource={[{color: 'green', name: 'India', population: '38332521' },
                {color: 'purple', name: 'New Zealand', population: '19651127' },
                {color: 'blue', name: 'Pakistan', population: '3090416' }]} minRadius={20} maxRadius={40} />
                        </BubblesDirective>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>,
            document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
            <Inject services={[Bubble]}/>
                <LayersDirective>
                    <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                        <BubblesDirective>
                            <BubbleDirective visible={true} valuePath="population" dataSource={[{ color: 'green', name: 'India', population: '38332521' },
    { color: 'purple', name: 'New Zealand', population: '19651127' },
    { color: 'blue', name: 'Pakistan', population: '3090416' }]} minRadius={20} maxRadius={40}/>
                        </BubblesDirective>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>, document.getElementById("maps"));

Bubble shapes

The following types of shapes are available to render the bubbles in Maps.

  • Circle
  • Square

By default, bubbles are rendered in the Circle type. To change the type of the bubble, set the bubbleType property of BubbleDirective as Square to render the square shape bubbles.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" bubbleType="Square" dataSource={[{ name: 'India', population: '38332521' },
                        { name: 'Pakistan', population: '3090416' }]} minRadius={20} maxRadius={40} />
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" bubbleType="Square" dataSource={[{ name: 'India', population: '38332521' },
    { name: 'Pakistan', population: '3090416' }]} minRadius={20} maxRadius={40}/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));

Customization

The following properties are available in BubbleDirective to customize the bubbles of the Maps component.

  • border – To customize the color, width and opacity of the border of the bubbles in Maps.
  • fill – To apply the color for bubbles in Maps.
  • opacity – To apply opacity to the bubbles in Maps.
  • animationDelay - To change the time delay in the transition for bubbles.
  • animationDuration - To change the time duration of animation for bubbles.
Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population"
                                         dataSource={[
                                            { name: 'India', population: '38332521' },
                                            { name: 'Pakistan', population: '3090416' },
                                            { name: 'New Zealand', population: '19651127' }
                                         ]}
                                         minRadius={5} maxRadius={40} fill="green"
                                         animationDelay={100} animationDuration={1000} opacity={1}
                                         border={{color: "blue", width: 2}} />
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[
    { name: 'India', population: '38332521' },
    { name: 'Pakistan', population: '3090416' },
    { name: 'New Zealand', population: '19651127' }
]} minRadius={5} maxRadius={40} fill="green" animationDelay={100} animationDuration={1000} opacity={1} border={{ color: "blue", width: 2 }}/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));

Setting colors to the bubbles from the data source

The color for each bubble in the Maps can be set using the colorValuePath property of BubbleDirective. The value for the colorValuePath property is the field name from the data source of the BubbleDirective which contains the color values.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population"
                                         dataSource={[
                                            { name: 'India', population: '38332521', color: 'blue' },
                                            { name: 'New Zealand', population: '19651127', color: '#c2d2d6' },
                                            { name: 'Pakistan', population: '3090416', color: '#09156d' }
                                         ]}
                                         minRadius={20} maxRadius={40} colorValuePath="color"/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[
    { name: 'India', population: '38332521', color: 'blue' },
    { name: 'New Zealand', population: '19651127', color: '#c2d2d6' },
    { name: 'Pakistan', population: '3090416', color: '#09156d' }
]} minRadius={20} maxRadius={40} colorValuePath="color"/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));

Setting the range of the bubble size

The size of the bubbles is calculated from the values got from the valuePath property. The range for the radius of the bubbles can be modified using minRadius and maxRadius properties.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[{name: 'India', population: '38332521' },
            {name: 'New Zealand', population: '19651127' },
            {name: 'Pakistan', population: '3090416' }]} minRadius={5} maxRadius={80} />
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[{ name: 'India', population: '38332521' },
    { name: 'New Zealand', population: '19651127' },
    { name: 'Pakistan', population: '3090416' }]} minRadius={5} maxRadius={80}/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));

Multiple bubble groups

Multiple groups of bubbles can be added to the Maps using the BubbleDirective in which the properties of bubbles are added as an array. The customization for the bubbles can be done with the BubbleDirective. In the following example, the gender-wise population ratio is demonstrated with two different bubble groups.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true}
                                         valuePath="femaleRatio"
                                         colorValuePath="femaleRatioColor"
                                         dataSource={[
                                             {country: "United States", femaleRatio: 50.50442726, maleRatio: 49.49557274, femaleRatioColor: "green", maleRatioColor: "blue" },
                                             {country: "India", femaleRatio: 48.18032713, maleRatio: 51.81967287, femaleRatioColor: "blue", maleRatioColor: "#c2d2d6" },
                                             {country: "Oman", femaleRatio: 34.15597234, maleRatio: 65.84402766, femaleRatioColor: "#09156d", maleRatioColor: "orange" }, {country: "United Arab Emirates", femaleRatio: 27.59638942, maleRatio: 72.40361058, femaleRatioColor: "#09156d", maleRatioColor: "orange"}]} minRadius={5} maxRadius={20} />
                        <BubbleDirective visible={true}
                                         bubbleType="Circle"
                                         valuePath="maleRatio"
                                         colorValuePath="maleRatioColor"
                                         dataSource={[
                                             {country: "United States", femaleRatio: 50.50442726, maleRatio: 49.49557274, femaleRatioColor: "green", maleRatioColor: "blue" },
                                             {country: "India", femaleRatio: 48.18032713, maleRatio: 51.81967287, femaleRatioColor: "blue", maleRatioColor: "#c2d2d6" },
                                             {country: "Oman", femaleRatio: 34.15597234, maleRatio: 65.84402766, femaleRatioColor: "#09156d", maleRatioColor: "orange" }, {country: "United Arab Emirates", femaleRatio: 27.59638942, maleRatio: 72.40361058, femaleRatioColor: "#09156d", maleRatioColor: "orange"}]} minRadius={15} maxRadius={25} opacity={0.4} />
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="femaleRatio" colorValuePath="femaleRatioColor" dataSource={[
    { country: "United States", femaleRatio: 50.50442726, maleRatio: 49.49557274, femaleRatioColor: "green", maleRatioColor: "blue" },
    { country: "India", femaleRatio: 48.18032713, maleRatio: 51.81967287, femaleRatioColor: "blue", maleRatioColor: "#c2d2d6" },
    { country: "Oman", femaleRatio: 34.15597234, maleRatio: 65.84402766, femaleRatioColor: "#09156d", maleRatioColor: "orange" }, { country: "United Arab Emirates", femaleRatio: 27.59638942, maleRatio: 72.40361058, femaleRatioColor: "#09156d", maleRatioColor: "orange" }
]} minRadius={5} maxRadius={20}/>
                        <BubbleDirective visible={true} bubbleType="Circle" valuePath="maleRatio" colorValuePath="maleRatioColor" dataSource={[
    { country: "United States", femaleRatio: 50.50442726, maleRatio: 49.49557274, femaleRatioColor: "green", maleRatioColor: "blue" },
    { country: "India", femaleRatio: 48.18032713, maleRatio: 51.81967287, femaleRatioColor: "blue", maleRatioColor: "#c2d2d6" },
    { country: "Oman", femaleRatio: 34.15597234, maleRatio: 65.84402766, femaleRatioColor: "#09156d", maleRatioColor: "orange" }, { country: "United Arab Emirates", femaleRatio: 27.59638942, maleRatio: 72.40361058, femaleRatioColor: "#09156d", maleRatioColor: "orange" }
]} minRadius={15} maxRadius={25} opacity={0.4}/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));

Enable tooltip for bubble

The tooltip for the bubbles can be enabled by setting the visible property of the tooltipSettings as true. The content for the tooltip can be set using the valuePath property in the tooltipSettings of the BubbleDirective where the value for the valuePath property is the field name from the data source of the BubbleDirective. Also added any HTML element as the template in tooltip using the template property.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble, MapsTooltip } from '@syncfusion/ej2-react-maps';


ReactDOM.render(
        <MapsComponent id="maps">
        <Inject services={[Bubble, MapsTooltip]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[
                                        { name: 'India', population: '38332521' },
                                        { name: 'New Zealand', population: '19651127' },
                                        { name: 'Pakistan', population: '3090416' }]}
                                        minRadius={5} maxRadius={80}
                                        tooltipSettings={{
                                            visible: true,
                                            valuePath: 'population'
                                        }} />
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>,
        document.getElementById("maps") as HTMLElement
);
Copied to clipboard
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble, MapsTooltip } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
        <Inject services={[Bubble, MapsTooltip]}/>
            <LayersDirective>
                <LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
                    <BubblesDirective>
                        <BubbleDirective visible={true} valuePath="population" dataSource={[
    { name: 'India', population: '38332521' },
    { name: 'New Zealand', population: '19651127' },
    { name: 'Pakistan', population: '3090416' }
]} minRadius={5} maxRadius={80} tooltipSettings={{
    visible: true,
    valuePath: 'population'
}}/>
                    </BubblesDirective>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>, document.getElementById("maps"));