Search results

Bubble

Bubbles in the Maps control represent the underlying data values of the map. Bubbles are scattered throughout the maps shapes that contains bound values.

Bubbles are included when data binding and the bubbleSettings is set to the shape layers.

To add bubbles to the map, bind data source to the layer bubbleSeetings and set the valuePath as population. Following example illustrates bubble enable for the world map with datasource. To render bubble in maps need to inject Bubble module using provide option.

export let world_map = // paste the world map from worldMap.json Geo json file.
Source
Preview
app.vue
<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 Vue from 'vue';
import { MapsPlugin, Bubble } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
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>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Enable Legend for Bubble

To enable the legend for the bubble, need to set legendSettings.visible as true and legendSettings.type as ‘Bubbles’. To render the legend in maps need to Inject Legend module using provide option. Refer the below code snippet to enable the legend for bubbles with each bubble different colors rendering.

Source
Preview
app.vue
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps :legendSettings='legendSettings' >
                <e-layers>
                    <e-layer :shapeData='shapeData' :shapePropertyPath='shapePropertyPath' :shapeDataPath='shapeDataPath' :bubbleSettings='bubbleSettings' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { MapsPlugin, Bubble, Legend } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
    return{
        legendSettings: {
            visible: true,
            type: 'Bubbles'
        },
         shapeData: world_map,
        shapeDataPath: 'name',
        shapePropertyPath: 'name',
        bubbleSettings: [{
            visible: true,
            minRadius: 20,
            dataSource: [
                {color: 'green', name: 'India', population: '38332521' },
                {color: 'purple', name: 'New Zealand', population: '19651127' },
                {color: 'blue', name: 'Pakistan', population: '3090416' }
            ],
            maxRadius: 40,
            colorValuePath: 'color',
            valuePath: 'population'
        }]
    }
},
provide: {
    maps: [Bubble, Legend]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>