I'm trying to dynamically change the dataSource of the bubbleSettings from my layer, this should happen when the scale of zoom goes over 3.
Below you can find the code I'm using (which is not working). Could you help me figure our why it is not working?
import { Component, OnInit } from '@angular/core';
import { Maps, Bubble, MapsTooltip, IBubbleRenderingEventArgs, Zoom, IMapZoomEventArgs } from '@syncfusion/ej2-angular-maps';
Maps.Inject(Bubble, MapsTooltip, Zoom);
let worldMap: object[] = require('./world_map.json');
@Component({
selector: 'app-search-location-in-map',
templateUrl: './search-location-in-map.component.html',
styleUrls: ['./search-location-in-map.component.css', '../reports.component.css']
})
export class SearchLocationInMapComponent implements OnInit {
internetUsers = [
{ 'rank': 1, 'name': 'China', 'value': this.bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194},
{ 'rank': 2, 'name': 'India', 'value': this.bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },
{ 'rank': 3, 'name': 'United States', 'value': this.bubblesize(245436423), 'color': '#99295D ','population': 245436423 },
{ 'rank': 4, 'name': 'Brazil', 'value': this.bubblesize(123927230), 'color': '#364A98','population': 123927230 },
{ 'rank': 5, 'name': 'Japan', 'value': this.bubblesize(117528631), 'color': '#7F38A0 ','population': 117528631 },
{ 'rank': 6, 'name': 'Russia', 'value': this.bubblesize(110003284), 'color': '#2E769F','population': 110003284 },
{ 'rank': 7, 'name': 'Mexico', 'value': this.bubblesize(75937568), 'color': '#99295D ','population': 75937568 },
{ 'rank': 8, 'name': 'Germany', 'value': this.bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },
{ 'rank': 9, 'name': 'Indonesia', 'value': this.bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },
{ 'rank': 10, 'name': 'United Kingdom', 'value': this.bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },
{ 'rank': 11, 'name': 'Philippines', 'value': this.bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },
{ 'rank': 12, 'name': 'France', 'value': this.bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },
{ 'rank': 13, 'name': 'Nigeria', 'value': this.bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },
{ 'rank': 14, 'name': 'South Africa', 'value': this.bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },
{ 'rank': 15, 'name': 'Turkey', 'value': this.bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },
];
internetUsers2 = [
{ 'rank': 16, 'name': 'Vietnam', 'value': this.bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },
{ 'rank': 17, 'name': 'Iran', 'value': this.bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },
{ 'rank': 18, 'name': 'Egypt', 'value': this.bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },
{ 'rank': 19, 'name': 'Spain', 'value': this.bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },
{ 'rank': 20, 'name': 'Italy', 'value': this.bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },
{ 'rank': 21, 'name': 'Thailand', 'value': this.bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },
{ 'rank': 22, 'name': 'Canada', 'value': this.bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },
{ 'rank': 23, 'name': 'Argentina', 'value': this.bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },
{ 'rank': 24, 'name': 'South Africa', 'value': this.bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },
{ 'rank': 25, 'name': 'Pakistan', 'value': this.bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },
{ 'rank': 26, 'name': 'Bangladesh', 'value': this.bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },
{ 'rank': 27, 'name': 'Colombia', 'value': this.bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },
{ 'rank': 28, 'name': 'Poland', 'value': this.bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },
{ 'rank': 29, 'name': 'Malaysia', 'value': this.bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },
{ 'rank': 30, 'name': 'Saudi Arabia', 'value': this.bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },
];
bubblesize(value: number): number {
let max: number = 1347565324;
let min: number = 324366;
let maxBox: number = 70 * 70 * 2 * Math.PI;
let minBox: number = 3 * 3 * 2 * Math.PI;
let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;
if (box < minBox) {
box = minBox;
}
return Math.sqrt(box / (Math.PI * 2)) / 2;
}
public maps: Maps;
public layers: object[] = [
{shapeDataPath: 'name',
shapePropertyPath: 'name',
shapeData: worldMap,
shapeSettings: {
fill: '#E5E5E5'
},
bubbleSettings: [
{
visible: true,
valuePath: 'value',
colorValuePath: 'color',
minRadius: 3,
maxRadius: 70,
opacity: 0.8,
dataSource: this.internetUsers,
tooltipSettings: {
visible: true,
valuePath: 'population',
template: '<div id="template"> <div class="toolback"> <div class="listing2"> <center> ${name} </center> </div> <hr style="margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD"> <div> <span class="listing1">Rank : </span><span class="listing2">${rank}</span> </div> <div> <span class="listing1">Population : </span><span class="listing2">${population}</span> </div> </div> </div>'
},
}
]
}
]
constructor() { }
ngOnInit() {
}
// custom code end
public zoomSettings: object= {
enable: true,
horizontalAlignment: 'Near',
toolBarOrientation: 'Vertical',
pinchZooming: true
}
public titleSettings : object = {
text: 'Top 30 countries with highest Internet users',
titleStyle: {
size: '16px'
}
}
onZoom(args: IMapZoomEventArgs){
if (args.scale["current"] > 2){
this.layers[0]['bubbleSettings'][0].dataSource = this.internetUsers2;
console.log(this.layers);
} else {
this.layers[0]['bubbleSettings'][0].dataSource = this.internetUsers;
}
this.maps.refresh();
}
bubbleRendering(args: IBubbleRenderingEventArgs){
this.maps = args.maps;
}
}
