Bubble in EJ2 TypeScript Maps control
27 Apr 202324 minutes to read
Bubbles in the Maps control represent the underlying data values of the map. It can be scattered throughout the map shapes that contain values in the data source. Bubbles are enabled by setting the visible
property of bubbleSettings
to true. To render bubble in Maps, Bubble module must be injected into Maps using Maps.Inject(Bubble) method.
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({ });
To add bubbles to the map, bind the data source to the dataSource
property of bubbleSettings
and set the field name, that contains the numerical data, in the data source to the valuePath
property.
export let world_map = // paste the World map from WorldMap.json Geo json file.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 20,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 40,
valuePath: 'population'
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Bubble shapes
The following types of shapes are available to render the bubbles in Maps.
- Circle
- Square
By default, bubbles are rendered in Circle type. To change the type of the bubble, set the bubbleType
property of bubbleSettings
as Square to render the square shape bubbles.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
bubbleType: 'Square',
visible: true,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' }
],
valuePath: 'population'
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Customization
The following properties are available in bubbleSettings
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.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
fill: 'green',
animationDelay: 100,
animationDuration: 1000,
maxRadius: 80,
border: {
color: 'blue',
width: 2
},
opacity: 1,
valuePath: 'population'
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Setting color to the bubbles from the data source
The color for each bubble in the Maps can be set using the colorValuePath
property of bubbleSettings
. The value for the colorValuePath
property is the field name from the data source of the bubbleSettings
which contains the color code values.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 20,
colorValuePath: 'color',
dataSource: [
{ name: 'India', population: '38332521', color: 'blue' },
{ name: 'New Zealand', population: '19651127', color: '#c2d2d6' },
{ name: 'Pakistan', population: '3090416', color: '#09156d' }
],
maxRadius: 40,
valuePath: 'population'
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Bubble Sizing
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.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 80,
valuePath: 'population'
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Multiple bubble groups
Multiple groups of bubbles can be added as an array using the bubbleSettings
and customization for the bubbles can be done with this property. In the following example, the gender-wise population ratio is demonstrated with two different bubble groups.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 5,
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"
}
],
maxRadius: 20,
},
{
visible: true,
bubbleType: 'Circle',
opacity: 0.4,
minRadius: 15,
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"
}
],
maxRadius: 25,
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Enable tooltip for bubble
The tooltip for the bubbles can be enabled by setting the visible
property of the tooltipSettings
as true. MapsTooltip module must be injected into the Maps using the Maps.Inject(MapsTooltip) method to enable the tooltip in bubbles. The content for the tooltip can be set using the valuePath
property in the tooltipSettings
of the bubbleSettings
where the value for the valuePath
property is the field name from the data source of the bubbleSettings
.
import { world_map } from './world-map.ts';
import { Maps, Bubble, MapsTooltip } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble, MapsTooltip);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 80,
valuePath: 'population',
tooltipSettings: {
visible: true,
valuePath: 'population',
},
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>