bubble-plnkr.json

{"index.css":"","map-data/population-data":"/**\r\n * Countries population\r\n */\r\n//tslint:disable\r\nexport let population: any = [\r\n    { 'name': 'Afghanistan', 'value': bubblesize(32358260), 'color': '#7F38A0 ' },\r\n    { 'name': 'Albania', 'value': bubblesize(32159880), 'color': '#2E769F' },\r\n    { 'name': 'Algeria', 'value': bubblesize(35980193), 'color': '#816F28' },\r\n    { 'name': 'Angola', 'value': bubblesize(19618432), 'color': '#816F28' },\r\n    { 'name': 'Argentina', 'value': bubblesize(40764561), 'color': '#364A98' },\r\n    { 'name': 'Armenia', 'value': bubblesize(3100236), 'color': '#2E769F' },\r\n    { 'name': 'Australia', 'value': bubblesize(22605732), 'color': '  #257E7B ' },\r\n    { 'name': 'Austria', 'value': bubblesize(8413429), 'color': '#2E769F' },\r\n    { 'name': 'Azerbaijan', 'value': bubblesize(9306023), 'color': '#2E769F' },\r\n    { 'name': 'Bangladesh', 'value': bubblesize(150493658), 'color': '#7F38A0 ' },\r\n    { 'name': 'Belarus', 'value': bubblesize(9559441), 'color': '#2E769F' },\r\n    { 'name': 'Belgium', 'value': bubblesize(10754056), 'color': '#2E769F' },\r\n    { 'name': 'Benin', 'value': bubblesize(9099922), 'color': '#816F28' },\r\n    { 'name': 'Bhutan', 'value': bubblesize(738267), 'color': '#7F38A0 ' },\r\n    { 'name': 'Bolivia', 'value': bubblesize(10088108), 'color': '#364A98' },\r\n    { 'name': 'Botswana', 'value': bubblesize(2030738), 'color': '#816F28' },\r\n    { 'name': 'Brazil', 'value': bubblesize(196655014), 'color': '#364A98' },\r\n    { 'name': 'Brunei', 'value': bubblesize(405938), 'color': '#7F38A0 ' },\r\n    { 'name': 'Bulgaria', 'value': bubblesize(7446135), 'color': '#2E769F' },\r\n    { 'name': 'Burkina Faso', 'value': bubblesize(16967845), 'color': '#816F28' },\r\n    { 'name': 'Burundi', 'value': bubblesize(8575172), 'color': '#816F28' },\r\n    { 'name': 'Cambodia', 'value': bubblesize(14305183), 'color': '#7F38A0 ' },\r\n    { 'name': 'Cameroon', 'value': bubblesize(20030362), 'color': '#816F28' },\r\n    { 'name': 'Canada', 'value': bubblesize(34349561), 'color': '#99295D ' },\r\n    { 'name': 'Central African Rep.', 'value': bubblesize(4486837), 'color': '#816F28' },\r\n    { 'name': 'Chad', 'value': bubblesize(11525496), 'color': '#816F28' },\r\n    { 'name': 'Chile', 'value': bubblesize(17269525), 'color': '#364A98' },\r\n    { 'name': 'China', 'value': bubblesize(1347565324), 'color': '#7F38A0 ' },\r\n    { 'name': 'Colombia', 'value': bubblesize(46927125), 'color': '#364A98' },\r\n    { 'name': 'Costa Rica', 'value': bubblesize(4726575), 'color': '#99295D ' },\r\n    { 'name': 'Croatia', 'value': bubblesize(4395560), 'color': '#2E769F' },\r\n    { 'name': 'Cuba', 'value': bubblesize(11253665), 'color': '#99295D' },\r\n    { 'name': 'Cyprus', 'value': bubblesize(1116564), 'color': '#2E769F' },\r\n    { 'name': 'Czech Rep.', 'value': bubblesize(10534293), 'color': '#2E769F' },\r\n    { 'name': 'Denmark', 'value': bubblesize(5572594), 'color': '#2E769F' },\r\n    { 'name': 'Djibouti', 'value': bubblesize(905564), 'color': '#816F28' },\r\n    { 'name': 'Dominican Rep.', 'value': bubblesize(10056181), 'color': '#99295D ' },\r\n    { 'name': 'Ecuador', 'value': bubblesize(14666055), 'color': '#364A98' },\r\n    { 'name': 'Egypt', 'value': bubblesize(82536770), 'color': '#816F28' },\r\n    { 'name': 'El Salvador', 'value': bubblesize(6227491), 'color': '#99295D ' },\r\n    { 'name': 'Eritrea', 'value': bubblesize(5415280), 'color': '#816F28' },\r\n    { 'name': 'Estonia', 'value': bubblesize(1340537), 'color': '#2E769F' },\r\n    { 'name': 'Ethiopia', 'value': bubblesize(84734262), 'color': '#816F28' },\r\n    { 'name': 'Fiji', 'value': bubblesize(868406), 'color': '  #257E7B ' },\r\n    { 'name': 'Finland', 'value': bubblesize(5384770), 'color': '#2E769F' },\r\n    { 'name': 'France', 'value': bubblesize(63125894), 'color': '#2E769F' },\r\n    { 'name': 'Gabon', 'value': bubblesize(1534262), 'color': '#816F28' },\r\n    { 'name': 'Gambia', 'value': bubblesize(1776103), 'color': '#816F28' },\r\n    { 'name': 'Georgia', 'value': bubblesize(4329026), 'color': '#2E769F' },\r\n    { 'name': 'Germany', 'value': bubblesize(82162512), 'color': '#2E769F' },\r\n    { 'name': 'Ghana', 'value': bubblesize(24965816), 'color': '#816F28' },\r\n    { 'name': 'Greece', 'value': bubblesize(11390031), 'color': '#2E769F' },\r\n    { 'name': 'Guatemala', 'value': bubblesize(14757316), 'color': '#99295D ' },\r\n    { 'name': 'Guinea', 'value': bubblesize(10221808), 'color': '#816F28' },\r\n    { 'name': 'Guinea-Bissau', 'value': bubblesize(1547061), 'color': '#816F28' },\r\n    { 'name': 'Guyana', 'value': bubblesize(756040), 'color': '#364A98' },\r\n    { 'name': 'Haiti', 'value': bubblesize(10123787), 'color': '#99295D ' },\r\n    { 'name': 'Honduras', 'value': bubblesize(7754687), 'color': '#99295D ' },\r\n    { 'name': 'Hungary', 'value': bubblesize(9966116), 'color': '#2E769F' },\r\n    { 'name': 'Iceland', 'value': bubblesize(324366), 'color': '#2E769F' },\r\n    { 'name': 'India', 'value': bubblesize(1241491960), 'color': '#7F38A0 ' },\r\n    { 'name': 'Indonesia', 'value': bubblesize(242325638), 'color': '#7F38A0 ' },\r\n    { 'name': 'Iran', 'value': bubblesize(74798599), 'color': '#7F38A0 ' },\r\n    { 'name': 'Iraq', 'value': bubblesize(32664942), 'color': '#7F38A0 ' },\r\n    { 'name': 'Ireland', 'value': bubblesize(4525802), 'color': '#2E769F' },\r\n    { 'name': 'Israel', 'value': bubblesize(7562194), 'color': '#7F38A0 ' },\r\n    { 'name': 'Italy', 'value': bubblesize(60788694), 'color': '#2E769F' },\r\n    { 'name': 'Jamaica', 'value': bubblesize(2751273), 'color': '#99295D ' },\r\n    { 'name': 'Japan', 'value': bubblesize(126497241), 'color': '#7F38A0 ' },\r\n    { 'name': 'Jordan', 'value': bubblesize(6330169), 'color': '#7F38A0 ' },\r\n    { 'name': 'Kazakhstan', 'value': bubblesize(16206750), 'color': '#7F38A0 ' },\r\n    { 'name': 'Kenya', 'value': bubblesize(41609728), 'color': '#816F28' },\r\n    { 'name': 'Kuwait', 'value': bubblesize(2818042), 'color': '#7F38A0 ' },\r\n    { 'name': 'Kyrgyzstan', 'value': bubblesize(5392580), 'color': '#7F38A0 ' },\r\n    { 'name': 'Latvia', 'value': bubblesize(2243142), 'color': '#2E769F' },\r\n    { 'name': 'Lebanon', 'value': bubblesize(4259405), 'color': '#7F38A0 ' },\r\n    { 'name': 'Lesotho', 'value': bubblesize(2193843), 'color': '#816F28' },\r\n    { 'name': 'Liberia', 'value': bubblesize(4128572), 'color': '#816F28' },\r\n    { 'name': 'Libya', 'value': bubblesize(6422772), 'color': '#816F28' },\r\n    { 'name': 'Lithuania', 'value': bubblesize(3307481), 'color': '#2E769F' },\r\n    { 'name': 'Luxembourg', 'value': bubblesize(515941), 'color': '#2E769F' },\r\n    { 'name': 'Madagascar', 'value': bubblesize(21315135), 'color': '#816F28' },\r\n    { 'name': 'Malawi', 'value': bubblesize(15380888), 'color': '#816F28' },\r\n    { 'name': 'Malaysia', 'value': bubblesize(28859154), 'color': '#7F38A0 ' },\r\n    { 'name': 'Mali', 'value': bubblesize(15839538), 'color': '#816F28' },\r\n    { 'name': 'Mauritania', 'value': bubblesize(3541540), 'color': '#816F28' },\r\n    { 'name': 'Mexico', 'value': bubblesize(114793341), 'color': '#99295D ' },\r\n    { 'name': 'Moldova', 'value': bubblesize(3544864), 'color': '#2E769F' },\r\n    { 'name': 'Mongolia', 'value': bubblesize(2800114), 'color': '#7F38A0 ' },\r\n    { 'name': 'Montenegro', 'value': bubblesize(632261), 'color': '#2E769F' },\r\n    { 'name': 'Morocco', 'value': bubblesize(32272974), 'color': '#816F28' },\r\n    { 'name': 'Mozambique', 'value': bubblesize(23929708), 'color': '#816F28' },\r\n    { 'name': 'Myanmar', 'value': bubblesize(48336763), 'color': '#7F38A0 ' },\r\n    { 'name': 'Namibia', 'value': bubblesize(2324004), 'color': '#816F28' },\r\n    { 'name': 'Nepal', 'value': bubblesize(30485798), 'color': '#7F38A0 ' },\r\n    { 'name': 'Netherlands', 'value': bubblesize(16664746), 'color': '#2E769F' },\r\n    { 'name': 'New Zealand', 'value': bubblesize(4414509), 'color': '  #257E7B ' },\r\n    { 'name': 'Nicaragua', 'value': bubblesize(5869859), 'color': '#99295D ' },\r\n    { 'name': 'Niger', 'value': bubblesize(16068994), 'color': '#816F28' },\r\n    { 'name': 'Nigeria', 'value': bubblesize(162470737), 'color': '#816F28' },\r\n    { 'name': 'Norway', 'value': bubblesize(4924848), 'color': '#2E769F' },\r\n    { 'name': 'Oman', 'value': bubblesize(2846145), 'color': '#7F38A0 ' },\r\n    { 'name': 'Pakistan', 'value': bubblesize(176745364), 'color': '#7F38A0 ' },\r\n    { 'name': 'Panama', 'value': bubblesize(3571185), 'color': '#99295D ' },\r\n    { 'name': 'Papua New Guinea', 'value': bubblesize(7013829), 'color': '  #257E7B ' },\r\n    { 'name': 'Paraguay', 'value': bubblesize(6568290), 'color': '#364A98' },\r\n    { 'name': 'Peru', 'value': bubblesize(29399817), 'color': '#364A98' },\r\n    { 'name': 'Philippines', 'value': bubblesize(94852030), 'color': '#7F38A0 ' },\r\n    { 'name': 'Poland', 'value': bubblesize(38298949), 'color': '#2E769F' },\r\n    { 'name': 'Portugal', 'value': bubblesize(10689663), 'color': '#2E769F' },\r\n    { 'name': 'Puerto Rico', 'value': bubblesize(3745526), 'color': '#99295D ' },\r\n    { 'name': 'Qatar', 'value': bubblesize(1870041), 'color': '#7F38A0 ' },\r\n    { 'name': 'Romania', 'value': bubblesize(21436495), 'color': '#2E769F' },\r\n    { 'name': 'Russia', 'value': bubblesize(142835555), 'color': '#2E769F' },\r\n    { 'name': 'Rwanda', 'value': bubblesize(10942950), 'color': '#816F28' },\r\n    { 'name': 'Saudi Arabia', 'value': bubblesize(28082541), 'color': '#7F38A0 ' },\r\n    { 'name': 'Senegal', 'value': bubblesize(12767556), 'color': '#816F28' },\r\n    { 'name': 'Serbia', 'value': bubblesize(9853969), 'color': '#2E769F' },\r\n    { 'name': 'Sierra Leone', 'value': bubblesize(5997486), 'color': '#816F28' },\r\n    { 'name': 'Slovenia', 'value': bubblesize(2035012), 'color': '#2E769F' },\r\n    { 'name': 'Somalia', 'value': bubblesize(9556873), 'color': '#816F28' },\r\n    { 'name': 'South Africa', 'value': bubblesize(50459978), 'color': '#816F28' },\r\n    { 'name': 'Spain', 'value': bubblesize(46454895), 'color': '#2E769F' },\r\n    { 'name': 'Sri Lanka', 'value': bubblesize(21045394), 'color': '#7F38A0 ' },\r\n    { 'name': 'Sudan', 'value': bubblesize(34735288), 'color': '#816F28' },\r\n    { 'name': 'Suriname', 'value': bubblesize(529419), 'color': '#364A98' },\r\n    { 'name': 'Swaziland', 'value': bubblesize(1203330), 'color': '#816F28' },\r\n    { 'name': 'Sweden', 'value': bubblesize(9440747), 'color': '#2E769F' },\r\n    { 'name': 'Switzerland', 'value': bubblesize(7701690), 'color': '#2E769F' },\r\n    { 'name': 'Syria', 'value': bubblesize(20766037), 'color': '#7F38A0 ' },\r\n    { 'name': 'Taiwan', 'value': bubblesize(23072000), 'color': '#7F38A0 ' },\r\n    { 'name': 'Tajikistan', 'value': bubblesize(6976958), 'color': '#7F38A0 ' },\r\n    { 'name': 'Tanzania', 'value': bubblesize(46218486), 'color': '#816F28' },\r\n    { 'name': 'Thailand', 'value': bubblesize(69518555), 'color': '#7F38A0 ' },\r\n    { 'name': 'Togo', 'value': bubblesize(6154813), 'color': '#816F28' },\r\n    { 'name': 'Trinidad and Tobago', 'value': bubblesize(1346350), 'color': '#99295D ' },\r\n    { 'name': 'Tunisia', 'value': bubblesize(10594057), 'color': '#816F28' },\r\n    { 'name': 'Turkey', 'value': bubblesize(73639596), 'color': '#2E769F' },\r\n    { 'name': 'Turkmenistan', 'value': bubblesize(5105301), 'color': '#7F38A0 ' },\r\n    { 'name': 'Uganda', 'value': bubblesize(34509205), 'color': '#816F28' },\r\n    { 'name': 'Ukraine', 'value': bubblesize(45190180), 'color': '#2E769F' },\r\n    { 'name': 'United Arab Emirates', 'value': bubblesize(7890924), 'color': '#7F38A0 ' },\r\n    { 'name': 'United Kingdom', 'value': bubblesize(62417431), 'color': '#2E769F' },\r\n    { 'name': 'United States', 'value': bubblesize(313085380), 'color': '#99295D ' },\r\n    { 'name': 'Uruguay', 'value': bubblesize(3380008), 'color': '#364A98' },\r\n    { 'name': 'Uzbekistan', 'value': bubblesize(27760267), 'color': '#7F38A0 ' },\r\n    { 'name': 'Venezuela', 'value': bubblesize(29436891), 'color': '#364A98' },\r\n    { 'name': 'Vietnam', 'value': bubblesize(88791996), 'color': '#7F38A0 ' },\r\n    { 'name': 'Zambia', 'value': bubblesize(13474959), 'color': '#816F28' },\r\n    { 'name': 'Zimbabwe', 'value': bubblesize(12754378), 'color': '#816F28' }\r\n];\r\nexport let usaPopulation: any = [\r\n    { 'name': 'California', 'population': 37252895, 'color': '#004374' },\r\n    { 'name': 'Texas', 'population': 25146105, 'color': '#3182bd' },\r\n    { 'name': 'Florida', 'population': 18804623, 'color': '#4c96cb' },\r\n    { 'name': 'New York', 'population': 19378087, 'color': '#4c96cb' },\r\n    { 'name': 'Pennsylvania', 'population': 12702887, 'color': '#4c96cb' },\r\n    { 'name': 'Illinois', 'population': 12831549, 'color': '#4c96cb' },\r\n    { 'name': 'Ohio', 'population': 11536725, 'color': '#6ea7d2' },\r\n    { 'name': 'Georgia', 'population': 9688681, 'color': '#6ea7d2' },\r\n    { 'name': 'North Carolina', 'population': 9535692, 'color': '#6ea7d2' },\r\n    { 'name': 'Michigan', 'population': 9884129, 'color': '#6ea7d2' },\r\n    { 'name': 'New Jersey', 'population': 8791936, 'color': '#6ea7d2' },\r\n    { 'name': 'Virginia', 'population': 8001045, 'color': '#90bad8' },\r\n    { 'name': 'Washington', 'population': 6724543, 'color': '#90bad8' },\r\n    { 'name': 'Arizona', 'population': 6392307, 'color': '#90bad8' },\r\n    { 'name': 'Massachusetts', 'population': 6547817, 'color': '#90bad8' },\r\n    { 'name': 'Tennessee', 'population': 6346275, 'color': '#90bad8' },\r\n    { 'name': 'Indiana', 'population': 6484229, 'color': '#90bad8' },\r\n    { 'name': 'Missouri', 'population': 5988927, 'color': '#90bad8' },\r\n    { 'name': 'Maryland', 'population': 5773785, 'color': '#90bad8' },\r\n    { 'name': 'Wisconsin', 'population': 5687289, 'color': '#90bad8' },\r\n    { 'name': 'Colorado', 'population': 5029324, 'color': '#90bad8' },\r\n    { 'name': 'Minnesota', 'population': 5303925, 'color': '#90bad8' },\r\n    { 'name': 'South Carolina', 'population': 4625401, 'color': '#b0cde1' },\r\n    { 'name': 'Alabama', 'population': 4780127, 'color': '#b0cde1' },\r\n    { 'name': 'Louisiana', 'population': 4533479, 'color': '#b0cde1' },\r\n    { 'name': 'Kentucky', 'population': 4339349, 'color': '#b0cde1' },\r\n    { 'name': 'Oregon', 'population': 3831073, 'color': '#b0cde1' },\r\n    { 'name': 'Oklahoma', 'population': 3751616, 'color': '#b0cde1' },\r\n    { 'name': 'Connecticut', 'population': 3574118, 'color': '#b0cde1' },\r\n    { 'name': 'Puerto Rico', 'population': 3726157, 'color': '#b0cde1' },\r\n    { 'name': 'Iowa', 'population': 3046869, 'color': '#b0cde1' },\r\n    { 'name': 'Utah', 'population': 2763888, 'color': '#b0cde1' },\r\n    { 'name': 'Arkansas', 'population': 2915958, 'color': '#b0cde1' },\r\n    { 'name': 'Nevada', 'population': 2700691, 'color': '#b0cde1' },\r\n    { 'name': 'Mississippi', 'population': 2968103, 'color': '#b0cde1' },\r\n    { 'name': 'Kansas', 'population': 2853132, 'color': '#b0cde1' },\r\n    { 'name': 'New Mexico', 'population': 2059192, 'color': '#ecf3f7' },\r\n    { 'name': 'Nebraska', 'population': 1826341, 'color': '#ecf3f7' },\r\n    { 'name': 'West Virginia', 'population': 1853011, 'color': '#ecf3f7' },\r\n    { 'name': 'Idaho', 'population': 1567652, 'color': '#ecf3f7' },\r\n    { 'name': 'Hawaii', 'population': 1360301, 'color': '#ecf3f7' },\r\n    { 'name': 'New Hampshire', 'population': 1316466, 'color': '#ecf3f7' },\r\n    { 'name': 'Maine', 'population': 1328361, 'color': '#ecf3f7' },\r\n    { 'name': 'Rhode Island', 'population': 1052931, 'color': '#ecf3f7' },\r\n    { 'name': 'Montana', 'population': 989417, 'color': '#ecf3f7' },\r\n    { 'name': 'Delaware', 'population': 897936, 'color': '#ecf3f7' },\r\n    { 'name': 'South Dakota', 'population': 814191, 'color': '#ecf3f7' },\r\n    { 'name': 'North Dakota', 'population': 672591, 'color': '#ecf3f7' },\r\n    { 'name': 'Alaska', 'population': 710249, 'color': '#ecf3f7' },\r\n    { 'name': 'District of Columbia', 'population': 601767, 'color': '#ecf3f7' },\r\n    { 'name': 'Vermont', 'population': 625745, 'color': '#ecf3f7' },\r\n    { 'name': 'Wyoming', 'population': 583767, 'color': '#ecf3f7' }\r\n];\r\nexport let internetUsers: any = [\r\n    { 'rank': 1, 'name': 'China', 'value': bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194 },\r\n    { 'rank': 2, 'name': 'India', 'value': bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },\r\n    { 'rank': 3, 'name': 'United States', 'value': bubblesize(245436423), 'color': '#99295D ', 'population': 245436423 },\r\n    { 'rank': 4, 'name': 'Brazil', 'value': bubblesize(123927230), 'color': '#364A98', 'population': 123927230 },\r\n    { 'rank': 5, 'name': 'Japan', 'value': bubblesize(117528631), 'color': '#7F38A0 ', 'population': 117528631 },\r\n    { 'rank': 6, 'name': 'Russia', 'value': bubblesize(110003284), 'color': '#2E769F', 'population': 110003284 },\r\n    { 'rank': 7, 'name': 'Mexico', 'value': bubblesize(75937568), 'color': '#99295D ', 'population': 75937568 },\r\n    { 'rank': 8, 'name': 'Germany', 'value': bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },\r\n    { 'rank': 9, 'name': 'Indonesia', 'value': bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },\r\n    { 'rank': 10, 'name': 'United Kingdom', 'value': bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },\r\n    { 'rank': 11, 'name': 'Philippines', 'value': bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },\r\n    { 'rank': 12, 'name': 'France', 'value': bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },\r\n    { 'rank': 13, 'name': 'Nigeria', 'value': bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },\r\n    { 'rank': 14, 'name': 'South Africa', 'value': bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },\r\n    { 'rank': 15, 'name': 'Turkey', 'value': bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },\r\n    { 'rank': 16, 'name': 'Vietnam', 'value': bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },\r\n    { 'rank': 17, 'name': 'Iran', 'value': bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },\r\n    { 'rank': 18, 'name': 'Egypt', 'value': bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },\r\n    { 'rank': 19, 'name': 'Spain', 'value': bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },\r\n    { 'rank': 20, 'name': 'Italy', 'value': bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },\r\n    { 'rank': 21, 'name': 'Thailand', 'value': bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },\r\n    { 'rank': 22, 'name': 'Canada', 'value': bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },\r\n    { 'rank': 23, 'name': 'Argentina', 'value': bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },\r\n    { 'rank': 24, 'name': 'South Africa', 'value': bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },\r\n    { 'rank': 25, 'name': 'Pakistan', 'value': bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },\r\n    { 'rank': 26, 'name': 'Bangladesh', 'value': bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },\r\n    { 'rank': 27, 'name': 'Colombia', 'value': bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },\r\n    { 'rank': 28, 'name': 'Poland', 'value': bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },\r\n    { 'rank': 29, 'name': 'Malaysia', 'value': bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },\r\n    { 'rank': 30, 'name': 'Saudi Arabia', 'value': bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },\r\n\r\n];\r\nfunction bubblesize(value: number): number {\r\n    let max: number = 1347565324;\r\n    let min: number = 324366;\r\n    let maxBox: number = 70 * 70 * 2 * Math.PI;\r\n    let minBox: number = 3 * 3 * 2 * Math.PI;\r\n    let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;\r\n    if (box < minBox) {\r\n        box = minBox;\r\n    }\r\n    return Math.sqrt(box / (Math.PI * 2)) / 2;\r\n}\r\n\r\n","systemjs.config.js":"System.config({\r\n    transpiler: \"ts\",\r\n    typescriptOptions: {\r\n            target: \"es5\",\r\n            module: \"commonjs\",\r\n            moduleResolution: \"node\",\r\n            emitDecoratorMetadata: true,\r\n            experimentalDecorators: true,\r\n            \"jsx\": \"react\"\r\n    },\r\n     meta: {\r\n      'typescript': {\r\n        \"exports\": \"ts\"\r\n      },\r\n      '*.json': { loader: 'plugin-json' }\r\n    },\r\n    paths: {\r\n        \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n    map: {\r\n        app: 'app',\r\n        ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n        \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",        \r\n        \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n        \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n        \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n        \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n        \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n        \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n        \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n        \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n        \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n        \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n        \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n        \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n        \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n        \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n        \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n        \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n        \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n        \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n        \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n        \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n        \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n        \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n    },\r\n    packages: {\r\n        'app': { main: 'index', defaultExtension: 'tsx' },\r\n    }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Maps · BubbleMaps · Essential JS 2 for React · Syncfusion</title>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n    <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n    <!-- {{:meta}} -->\r\n    <meta name=\"author\" content=\"Syncfusion\" />\r\n    <script type=\"text/javascript\">\r\n        var themeName = location.hash || 'material';\r\n        themeName = themeName.replace('#','');\r\n        window.ripple = (themeName === \"material\")\r\n        document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n    </script>\r\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n    <script src=\"systemjs.config.js\"></script>\r\n    <link href=\"index.css\" rel=\"stylesheet\" />\r\n     <style>\r\n        #loader {\r\n            color: #008cff;\r\n            height: 40px;\r\n            left: 45%;\r\n            position: absolute;\r\n            top: 45%;\r\n            width: 30%;\r\n        }\r\n        body {\r\n            touch-action:none;\r\n        }\r\n        .body {\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n        }\r\n\r\n        .e-view {\r\n            bottom: 0;\r\n            left: 0;\r\n            overflow: hidden;\r\n            position: absolute;\r\n            right: 0;\r\n            top: 0;\r\n        }\r\n\r\n        .sb-left {\r\n            float: left;\r\n        }\r\n\r\n        .sb-right {\r\n            float: right;\r\n        }\r\n\r\n        .sb-block {\r\n            display: block;\r\n        }\r\n\r\n        .sb-table {\r\n            display: table;\r\n        }\r\n\r\n        .sb-table-cell {\r\n            display: table-cell;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        /*sample header*/\r\n\r\n\r\n        .sb-header {\r\n            height: 48px;\r\n            background: #FFFFFF;\r\n            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n            z-index: 1001;\r\n            opacity: 100;\r\n        }\r\n\r\n\r\n        .sb-header-left, .sb-header-right {\r\n            height: 100%;\r\n        }\r\n\r\n        #sb-header-text {\r\n            padding-left: 22px;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        .header-logo {\r\n            float: left;\r\n            padding-left: 8px;\r\n            padding-right: 22px;\r\n        }\r\n\r\n        .footer-logo {\r\n            background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n            height: 40px;\r\n            width: 140px;\r\n        }\r\n\r\n        .sb-header-splitter {\r\n            float: left;\r\n            border-left: 1px solid rgb(196, 196, 196);\r\n            height: 32px;\r\n            margin-top: 8px;\r\n            padding-left: 22 px;\r\n        }\r\n\r\n        .sb-header-settings {\r\n            display: none;\r\n        }\r\n\r\n        .product-style a{\r\n        padding-right: 15px;\r\n        font-family:Roboto;\r\n        font-weight: 500;\r\n        font-size: 13px;\r\n        color: #363636;\r\n        text-align: center;\r\n        text-decoration: none;\r\n        }\r\n        .product-style a:hover {\r\n            color:#3C78EF;\r\n        }\r\n\r\n        .sb-download-btn a {\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-download-text {\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-wrapper {\r\n            padding-right: 27px;\r\n        }\r\n\r\n        .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\";\r\n            font-weight: bold;\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        .sb-download-btn:hover {\r\n            background: #006CE6;\r\n        }\r\n\r\n        .sb-download-btn:focus {\r\n            background: #0051CB;\r\n        }\r\n\r\n        .sb-download-btn.active {\r\n            background: #0036B1;\r\n        }\r\n\r\n        .sb-download-btn {\r\n            background-color: #3C78EF;\r\n            opacity: 100;\r\n            border-radius: 2px;\r\n            font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n            font-weight: 500;\r\n            line-height: 18px;\r\n            height: 32px;\r\n            border-color: transparent;\r\n        }\r\n\r\n        .sb-bread-crumb {\r\n            padding-left: 20px;\r\n            padding-top: 24px;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .category-allcontrols a, .category-text a, .crumb-sample {\r\n            display: table;\r\n            opacity: 0.87;\r\n            font-family: Roboto;\r\n            font-weight: 500;\r\n            font-size: 15px;\r\n            color: #3C78EF;\r\n            text-align: left;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .sb-bread-crumb .sb-bread-crumb-text>div {\r\n            font-size: 15px;\r\n            font-weight: 500;\r\n            padding-right: 8px;\r\n            cursor: default;\r\n            display: table-cell;\r\n        }\r\n\r\n        .sb-bread-crumb-text>div.seperator {\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            vertical-align: bottom;\r\n        } \r\n\r\n        .content {\r\n        overflow: auto;\r\n        height: calc(100% - 50px);\r\n        top: 50px;\r\n        }\r\n\r\n\r\n        .sample-content {\r\n            top: 48px;\r\n            background: #FFFFFF;\r\n        }\r\n\r\n        .div {\r\n        display: block;\r\n        }\r\n\r\n        .control-section {\r\n            padding-left: 4px;\r\n        }\r\n\r\n        .crumb-sample {\r\n            color: #000000;\r\n            line-height: 18px;\r\n        }\r\n\r\n        #description {\r\n            padding-bottom: 16px;\r\n            padding-left: 20px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n            padding-top: 14px;\r\n        }\r\n\r\n        #action-description {\r\n            padding-left: 20px;\r\n            padding-bottom: 15px;\r\n            opacity: 0.75;\r\n            font-family: Roboto;\r\n            font-size: 13px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n        #description-section {\r\n            padding-left: 20px;\r\n            padding-top: 30px;\r\n            opacity: 0.87;\r\n            font-family:Roboto;\r\n            font-weight: 700;\r\n            font-size: 15px;\r\n            color: #000000;\r\n            text-align: left;\r\n        }\r\n\r\n\r\n\r\n    </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n        <div class=\"sample-browser\">\r\n            <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n                <div class='sb-header-left sb-left sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"header-logo\">\r\n                            <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n                                <div class=\"footer-logo\"> </div>\r\n                            </a>\r\n                        </div>\r\n    \r\n                    </div>\r\n                    <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div id='sb-header-text' class='e-sb-header-text'>\r\n    \r\n                            <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class='sb-header-right sb-right sb-table'>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class='product-style'>\r\n                            <div><a href=\"https://www.syncfusion.com/products/react/maps\">PRODUCT DETAILS</a></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class='sb-header-item sb-table-cell'>\r\n                        <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n                            <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n                                <button id=\"download-now\" class=\"sb-download-btn\">\r\n                                    <span class=\"sb-download-text\">DOWNLOAD</span>\r\n                                </button>\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n    \r\n            </div>\r\n            <div class ='content e-view'>\r\n            <div class='sample-content'>\r\n                <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n                    <div class=\"sb-bread-crumb-text\">\r\n                        <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/maps/default.html\"><span>Maps</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">BubbleMaps</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"control-content\">\r\n                <div id=\"action-description\">\r\n                        <p>\r\n                            \n                <p>\n                This sample illustrates the top 30 countries which has highest Internet users in bubbles of the year 2016. \n                </p>\n                \r\n                        </p>\r\n                    </div>\r\n                    <div class=\"container-fluid\">\r\n                        <div class=\"control-section\">\r\n                            <div id='sample'>\r\n                                <div id='loader'>Loading....</div>\r\n                            </div>\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <div id=\"description-section\">Description</div>    \r\n                    <div id=\"description\">\r\n                        <p>\r\n                           \n                <p>\n                  In this example, you can see how to render the bubbles for each shape in a map. Values of the shapes can be determined from the size and color of the bubbles. You can bind the desired colors from the data source to the bubbles.\n            \n                </p>\n                <p>\n                Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over a bubble or tap a bubble in touch enabled devices.\n                </p>\n            <br>\n                <p style=\"{{fontweight:\" 500}}=\"\">Injecting Module</p>\n                <p>\n                  Maps component features are segregated into individual feature-wise modules. To use the bubbles, inject the <code>Bubble</code> module using the <code>Maps.Inject(Bubble)</code> method.\n                </p>\n            \r\n                         </p>     \r\n                    </div>    \r\n                </div>             \r\n            </div>\r\n                \r\n            </div>\r\n        </div>\r\n          \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * Projection sample\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { MapAjax } from '@syncfusion/ej2-maps';\r\nimport {\r\n    MapsComponent, Inject, ILoadedEventArgs, MapsTheme, LayersDirective, LayerDirective,\r\n    ProjectionType, Bubble, IBubbleRenderingEventArgs, BubblesDirective, BubbleDirective, MapsTooltip, Zoom\r\n} from '@syncfusion/ej2-react-maps';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nimport { SampleBase } from './sample-base';\r\nimport { internetUsers } from '../map-data/population-data';\r\ninterface Data {\r\n    value?: number;\r\n}\r\nconst SAMPLE_CSS = `\r\n    .control-fluid {\r\n\t\tpadding: 0px !important;\r\n    }`;\r\nexport class BubbleMaps extends SampleBase<{}, {}> {\r\n    private mapInstance: MapsComponent;\r\n    private bubbleRendering(args: IBubbleRenderingEventArgs): void {\r\n        args.radius = (args.data as Data).value;\r\n    }\r\n    render() {\r\n        return (\r\n            <div className='control-pane'>\r\n                <style>\r\n                    {SAMPLE_CSS}\r\n                </style>\r\n                <div className='control-section row'>\r\n                    <div className='col-md-12'>\r\n                        <MapsComponent id=\"maps\" loaded={this.onMapsLoad.bind(this)} load={this.load} ref={m => this.mapInstance = m}\r\n                        useGroupingSeparator = {true}\r\n                        format = {\"n\"}\r\n                            zoomSettings={{\r\n                                enable: false,\r\n                                horizontalAlignment: 'Near',\r\n                                toolBarOrientation: 'Vertical',\r\n                                toolbars: [ 'ZoomIn', 'ZoomOut', 'Reset'],\r\n                                pinchZooming: true\r\n                            }}\r\n                            bubbleRendering={this.bubbleRendering.bind(this)}\r\n                            titleSettings={{\r\n                                text: 'Top 30 countries with highest Internet users',\r\n                                textStyle: {\r\n                                    size: '16px'\r\n                                }\r\n                            }}\r\n                        >\r\n                            <Inject services={[Bubble, MapsTooltip, Zoom]} />\r\n                            <LayersDirective>\r\n                                <LayerDirective shapeData={new MapAjax(location.origin + location.pathname + 'src/maps/map-data/world-map.json')}\r\n                                    shapePropertyPath='name'\r\n                                    shapeDataPath='name'\r\n                                    dataSource={new MapAjax(location.origin + location.pathname + 'src/maps/map-data/bubble-datasource.json')}\r\n                                    shapeSettings={{\r\n                                        fill: '#E5E5E5'\r\n                                    }}\r\n                                >\r\n                                <BubblesDirective>\r\n                                    <BubbleDirective dataSource={ internetUsers }\r\n                                        visible={true} valuePath='value' colorValuePath='color' minRadius={3} maxRadius={70}\r\n                                        opacity={0.8}\r\n                                        tooltipSettings= {{\r\n                                            visible: true,\r\n                                            valuePath: 'population',\r\n                                            template: '<div id=\"bubbletooltiptemplate\" style=\"width: 165px;background: rgba(53, 63, 76, 0.90); opacity: 90%;background: rgba(53, 63, 76, 0.90);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.40);padding: 10px;border: 1px #abb9c6;border-radius: 4px;\">'+\r\n                                            '<div style=\"font-size:13px;color:#ffffff;font-weight: 500;\"><center>${name}</center></div>'+\r\n                                            '<hr style=\"margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD\">'+\r\n                                            '<div><span style=\"font-size:13px;color:#cccccc\">Rank : </span><span style=\"font-size:13px;color:#ffffff;font-weight: 500;\">${rank}</span></div>'+\r\n                                            '<div><span style=\"font-size:13px;color:#cccccc\">Population : </span><span style=\"font-size:13px;color:#ffffff;font-weight: 500;\">${population}</span></div></div>',\r\n                                        }}\r\n                                    >\r\n                                    </BubbleDirective>\r\n                                </BubblesDirective>\r\n                                </LayerDirective>\r\n                            </LayersDirective>\r\n                        </MapsComponent>\r\n                    </div>\r\n                    <div style={{float: 'right', marginright: '10px'}}>Source: \r\n                        <a href=\"https://en.wikipedia.org/wiki/List_of_countries_by_number_of_Internet_users\" target=\"_blank\">en.wikipedia.org</a>\r\n                    </div>\r\n                    </div>\r\n            </div>\r\n        )\r\n    }\r\n    public onMapsLoad(args: ILoadedEventArgs): void {\r\n        let maps: Element = document.getElementById('maps');\r\n        maps.setAttribute('title', '');\r\n    };\r\n    public load(args: ILoadedEventArgs): void {\r\n        let selectedTheme: string = location.hash.split('/')[1];\r\n        selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n        args.maps.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as MapsTheme;\r\n    };\r\n}\nReactDOM.render(<BubbleMaps />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n    public rendereComplete(): void {\r\n        /**custom render complete function */\r\n    }\r\n    componentDidMount(): void {\r\n        setTimeout(() => {\r\n            this.rendereComplete();\r\n        }\r\n        );\r\n    }\r\n}"}