How can I help you?
Bubble in Vue Maps component
6 Feb 202624 minutes to read
Bubbles in the Maps component provide a visual representation of data values across geographical regions. They appear as circular or square shapes scattered over map areas, with their size proportional to the underlying data values. To enable bubbles, set the visible property of bubbleSettings to true. Then, bind the data source to the dataSource property and specify the field containing numerical data using the valuePath property.
export let world_map = // paste the world map from worldMap.json GeoJSON file.<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const bubbleSettings = [{
visible: true,
minRadius: 20,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 40,
valuePath: 'population'
}];
provide('maps', [Bubble]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
return{
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'
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Bubble shapes
The following types of shapes are available to render the bubbles in Maps.
- Circle
- Square
By default, bubbles render as Circle. To display square-shaped bubbles, set the bubbleType property of bubbleSettings to Square.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const bubbleSettings = [{
visible: true,
bubbleType: 'Square',
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' }
],
valuePath: 'population'
}];
provide('maps', [Bubble]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
bubbleType: 'Square',
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' }
],
valuePath: 'population'
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Customization
The bubbleSettings provides the following properties to customize the appearance of bubbles in 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.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const 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: 20,
border: {
color: 'blue',
width: 2
},
opacity: 1,
valuePath: 'population'
}];
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
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: 20,
border: {
color: 'blue',
width: 2
},
opacity: 1,
valuePath: 'population'
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>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 bubbleSettings. The value for the colorValuePath property is the field name from the data source of the bubbleSettings which contains the color values.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const 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'
}];
provide('maps', [Bubble]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
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'
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>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.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const bubbleSettings = [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 80,
valuePath: 'population'
}];
provide('maps', [Bubble]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
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'
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Multiple bubble groups
Multiple bubble groups can be added to the Maps component by defining an array of bubble configuration objects in the bubbleSettings property. Each bubble group can be customized independently. The following example demonstrates gender-wise population ratio using two different bubble groups.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const 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,
}];
provide('maps', [Bubble]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
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,
}]
}
},
provide: {
maps: [Bubble]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Enable tooltip for bubble
To enable tooltips for bubbles, set the visible property of the tooltipSettings to true. The tooltip content is specified using the valuePath property, which should be set to the field name from the data source that contains the tooltip values. Additionally, custom HTML content can be displayed in the tooltip using the template property.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Bubble, MapsTooltip, LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
const shapeData = world_map;
const shapeDataPath = 'name';
const shapePropertyPath = 'name';
const bubbleSettings = [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
maxRadius: 20,
valuePath: 'population',
tooltipSettings: {
visible: true,
valuePath: 'population',
}
}];
provide('maps', [Bubble, MapsTooltip]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-layers>
<e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import { MapsComponent, Bubble, MapsTooltip, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return {
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: 20,
valuePath: 'population',
tooltipSettings: {
visible: true,
valuePath: 'population',
}
}]
}
},
provide: {
maps: [Bubble, MapsTooltip]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>