Post
Ask Question

Working With Bubble Map in ASP.Net

Introduction

Hi all, how are you all doing today? Today we will explain how to create a Bubble Map in our application.

What a Bubble Map is: a Bubble Map is a tool for plotting the count or measure by country or any geo-locations in the map as a bubble. As the measure value increases, the bubble size will be increased, so we can get a live impression on what the data is. The only thing we need is, just the lat and long of those positions.

Background: a few days ago I got a requirement to implement a Bubble Map in my application. So I thought of sharing that with you all. Here we will see how to implement it in an easy way.

So Let Us Start. What you need first is to include the necessary JavaScript files. The required files are listed below.

  1. <script src="Scripts/jquery-1.11.1.min.js"></script>  
  2. <script src="Scripts/highmaps.js"></script>  
  3. <script src="Scripts/proj4.js"></script>  
  4. <script src="Scripts/us-all.js"></script>  
  5. <script src="Scripts/world.js"></script>
Once you are downloaded the files and provide the references, you are ready to go further.

Now it is time to get our data that we need to populate in the Bubble Map. In this example I am using the following data.

  1. var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];  
So our data is also ready now. Now  we can check whether the populated data is correct or not. According to the Bubble Map, if any of the data is incorect then the map itself won't load correctly. So it is always better to provide a check. I encountered many issues when doing this (because I was creating my data dynamically in my application), so I do not want it to happen in your case. You can use the following code for the check process.
  1. $.each(jsdata, function (ix, entry)   
  2. {    
  3.                 if (Object.keys(entry).length >= 4)   
  4.                 {    
  5.                     tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');    
  6.                     if (isNaN(tmp)) {    
  7.                         entry.z = entry[zPoint];    
  8.                     }    
  9.                     else {    
  10.     
  11.                     }    
  12.                     data1.push(entry);    
  13.                 }    
  14. });    
Here what I am doing is checking whether all the data has the necessary properties. In our case it is 4 (State, Quantity, lat and lon) .
Now we will load the map as follows.
  1. chart = $('#container').highcharts('Map', {  
  2.                chart: {  
  3.                    borderWidth: 1  
  4.                },  
  5.                title: {  
  6.                    text: 'Bubble map'  
  7.                },  
  8.                subtitle: {  
  9.                    text: 'Bubble map sub title'  
  10.                },  
  11.   
  12.                tooltip: {  
  13.                    pointFormat: '{point.State}: {point.Quantity}'  
  14.                },  
  15.   
  16.                mapNavigation: {  
  17.                    enabled: true,  
  18.                    buttonOptions: {  
  19.                        verticalAlign: 'bottom'  
  20.                    }  
  21.                },  
  22.                xAxis: {  
  23.                },  
  24.                yAxis: {  
  25.                },  
  26.                legend: {  
  27.                    enabled: true,  
  28.                    title: {  
  29.                        style: {  
  30.                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
  31.                        }  
  32.                    },  
  33.                    layout: 'vertical',  
  34.                    align: 'right',  
  35.                    verticalAlign: 'bottom',  
  36.                    floating: true,  
  37.                    valueDecimals: 0,  
  38.                    valueSuffix: '$',  
  39.                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
  40.                    symbolRadius: 0,  
  41.                    symbolHeight: 14  
  42.                },  
  43.                series: [{  
  44.                    mapData: map,  
  45.                    borderColor: '#E0E0E0',  
  46.                    colour: '#E0E0E0',  
  47.                    showInLegend: false,  
  48.                    enableMouseTracking: true,  
  49.                    cursor: 'pointer',  
  50.                    dataLabels: {  
  51.                        enabled: true,  
  52.                        format: '{point.properties.postal-code}',  
  53.                        textDecoration: 'none',  
  54.                        style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
  55.                    },  
  56.                    events: {  
  57.                        click: function (e) {  
  58.                            e.point.zoomTo();  
  59.                        }  
  60.                    },  
  61.                },  
  62.                {  
  63.                    type: 'mapbubble',  
  64.                    color: '#E0E0E0',  
  65.                    dataLabels: {  
  66.                        enabled: true,  
  67.                        formatter: function () {  
  68.                        }  
  69.                    },  
  70.                    enableMouseTracking: true,  
  71.                    joinBy: ['iso-a2', 'code'],  
  72.                    name: zPoint,  
  73.                    data: data1,  
  74.                    minSize: $("#mapMinBubSize").val(),  
  75.                    maxSize: $("#mapMaxBubSize").val(),  
  76.                    color: $("#mapColor").val(),  
  77.                    displayNegative: true,  
  78.                    sizeBy: 'width',  
  79.                    cursor: 'pointer',  
  80.                    negativeColor: Highcharts.getOptions().colors[0]  
  81.                }  
  82.                ],  
  83.                chart: {  
  84.                    marginRight: 50  
  85.                },  
  86.                exporting: {  
  87.                    enabled: false  
  88.                }  
  89.            }  
In the preceding codes you can see we are taking the values from some UI elements (for examle $("#mapMinBubSize").val()). Don't worry, we will see the settings option later. One more important thing is you can find a  variable called zPoint in the preceding code, this is the value of our bubble. That is, according to the value of the zPoint the Map Bubble will increase or decrease. 
  1. var zPoint = "Quantity";  
In the next part , we will create a function for loading the map.
  1. $(function () {  
  2.            loadMap();              
  3.        });  
Now it is time to write our complete code in that function. 
  1. function loadMap() {  
  2.           var selectMap = $.trim($("#mapSelectMap").val());  
  3.           var zPoint = "Quantity";  
  4.           var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];  
  5.           var data1 = [];  
  6.           var tmp = '';  
  7.           var formatedVal = 0;  
  8.           if (selectMap == "0") {  
  9.               var H = Highcharts,  
  10.                            map = H.maps['countries/us/us-all'],  
  11.                               chart;  
  12.           }  
  13.           else {  
  14.               var H = Highcharts,  
  15.                                 map = H.maps[selectMap],  
  16.                                    chart;  
  17.           }  
  18.           $.each(jsdata, function (ix, entry) {  
  19.               if (Object.keys(entry).length >= 4) {  
  20.                   tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');  
  21.                   if (isNaN(tmp)) {  
  22.                       entry.z = entry[zPoint];  
  23.                   }  
  24.                   else {  
  25.   
  26.                   }  
  27.                   data1.push(entry);  
  28.               }  
  29.           });  
  30.           chart = $('#container').highcharts('Map', {  
  31.               chart: {  
  32.                   borderWidth: 1  
  33.               },  
  34.               title: {  
  35.                   text: 'Bubble map'  
  36.               },  
  37.               subtitle: {  
  38.                   text: 'Bubble map sub title'  
  39.               },  
  40.   
  41.               tooltip: {  
  42.                   pointFormat: '{point.State}: {point.Quantity}'  
  43.               },  
  44.   
  45.               mapNavigation: {  
  46.                   enabled: true,  
  47.                   buttonOptions: {  
  48.                       verticalAlign: 'bottom'  
  49.                   }  
  50.               },  
  51.               xAxis: {  
  52.               },  
  53.               yAxis: {  
  54.               },  
  55.               legend: {  
  56.                   enabled: true,  
  57.                   title: {  
  58.                       style: {  
  59.                           color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
  60.                       }  
  61.                   },  
  62.                   layout: 'vertical',  
  63.                   align: 'right',  
  64.                   verticalAlign: 'bottom',  
  65.                   floating: true,  
  66.                   valueDecimals: 0,  
  67.                   valueSuffix: '$',  
  68.                   backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
  69.                   symbolRadius: 0,  
  70.                   symbolHeight: 14  
  71.               },  
  72.               series: [{  
  73.                   mapData: map,  
  74.                   borderColor: '#E0E0E0',  
  75.                   colour: '#E0E0E0',  
  76.                   showInLegend: false,  
  77.                   enableMouseTracking: true,  
  78.                   cursor: 'pointer',  
  79.                   dataLabels: {  
  80.                       enabled: true,  
  81.                       format: '{point.properties.postal-code}',  
  82.                       textDecoration: 'none',  
  83.                       style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
  84.                   },  
  85.                   events: {  
  86.                       click: function (e) {  
  87.                           e.point.zoomTo();  
  88.                       }  
  89.                   },  
  90.               },  
  91.               {  
  92.                   type: 'mapbubble',  
  93.                   color: '#E0E0E0',  
  94.                   dataLabels: {  
  95.                       enabled: true,  
  96.                       formatter: function () {  
  97.                       }  
  98.                   },  
  99.                   enableMouseTracking: true,  
  100.                   joinBy: ['iso-a2', 'code'],  
  101.                   name: zPoint,  
  102.                   data: data1,  
  103.                   minSize: $("#mapMinBubSize").val(),  
  104.                   maxSize: $("#mapMaxBubSize").val(),  
  105.                   color: $("#mapColor").val(),  
  106.                   displayNegative: true,  
  107.                   sizeBy: 'width',  
  108.                   cursor: 'pointer',  
  109.                   negativeColor: Highcharts.getOptions().colors[0]  
  110.               }  
  111.               ],  
  112.               chart: {  
  113.                   marginRight: 50  
  114.               },  
  115.               exporting: {  
  116.                   enabled: false  
  117.               }  
  118.           });  
  119.       }  
You can try giving a different setting or property to all the settings said above. Now if you run your code, you will get output as follows.
 
 
Figure 1 Output
 
I hope you got the output.
 
In the preceding implementation, I have given my tooltip as:
  1. tooltip: {  
  2.                    pointFormat: '{point.State}: {point.Quantity}'  
  3.           },  
You can try various options there too. Here I am taking the values State and Quantity from the relevant point. 
 
The next thing we will do is to create some UI elements. We will set the map bubble color, bubble size, background map and so on in these elements so that our application will be user-friendly.
 
Please add some UI elements as follows.
  1. Bubble Map Demo - SibeeshPassion  
  2.    <br />  
  3.    <br />  
  4.    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
  5.    <label>Min Bubble Size</label>  
  6.    <input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />  
  7.    <label>Max Bubble Size</label>  
  8.    <input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />  
  9.    <label>Color</label>  
  10.    <input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />  
  11.    <label>Select Map</label>  
  12.    <select name="tech" id="mapSelectMap" class="tech" title="Select Map.">  
  13.        <option value="0">Select Map</option>  
  14.        <option value="countries/us/us-all" selected="selected">US alone</option>  
  15.        <option value="custom/world">Custom World</option>  
  16.    </select>  
  17.    <div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>  
Now you can see those elements in your screen, right?
 
 
Figure 2 Search Bar

So we need to fire an event whenever the user clicks the apply settings button, right? Include the following code in your document ready function.
  1. $('#apply').click(function () {  
  2.                loadMap();  
  3.            });  
Now we will check whether our given settings are being applid to the map. Please see the following screenshot.
 
 
Figure 3 Map 
 
Now we have changed the bubble colour, bubble size and the map loaded in the background. Before the map was US alone one. Now it is the complete world.
 
Whenever the user changes the map we are checking it as follows.
  1. var selectMap = $.trim($("#mapSelectMap").val());
  2. if (selectMap == "0") {  
  3.                 var H = Highcharts,  
  4.                              map = H.maps['countries/us/us-all'],  
  5.                                 chart;  
  6.             }  
  7.             else {  
  8.                 var H = Highcharts,  
  9.                                   map = H.maps[selectMap],  
  10.                                      chart;  
  11.             }
Can you find the differences?
 
Complete HTML
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Bubble Map Demo - SibeeshPassion</title>  
  5.     <script src="Scripts/jquery-1.11.1.min.js"></script>  
  6.     <script src="Scripts/highmaps.js"></script>  
  7.     <script src="Scripts/proj4.js"></script>  
  8.     <script src="Scripts/us-all.js"></script>  
  9.     <script src="Scripts/world.js"></script>  
  10.   
  11.     <script>  
  12.         $(function () {  
  13.             loadMap();  
  14.             $('#apply').click(function () {  
  15.                 loadMap();  
  16.             });  
  17.         });  
  18.         function loadMap() {  
  19.             var selectMap = $.trim($("#mapSelectMap").val());  
  20.             var zPoint = "Quantity";  
  21.             var jsdata = [{ "State": "Arizona", "lat": "32.8796", "lon": "-111.7282", "Quantity": "29,248" }, { "State": "Arizona", "lat": "33.3197", "lon": "-111.9837", "Quantity": "102,928" }, { "State": "Arizona", "lat": "33.3939", "lon": "-111.6965", "Quantity": "108,863" }, { "State": "Arizona", "lat": "33.4495", "lon": "-112.3410", "Quantity": "67,218" }, { "State": "Arizona", "lat": "33.6155", "lon": "-111.9263", "Quantity": "66,556" }, { "State": "Arizona", "lat": "33.6384", "lon": "-112.2073", "Quantity": "147,552" }, { "State": "California", "lat": "33.6145", "lon": "-117.7101", "Quantity": "26,053" }, { "State": "California", "lat": "33.7008", "lon": "-117.9362", "Quantity": "26,057" }, { "State": "California", "lat": "33.7963", "lon": "-116.3845", "Quantity": "497,249" }, { "State": "California", "lat": "33.8274", "lon": "-118.0868", "Quantity": "32,052" }, { "State": "California", "lat": "33.8763", "lon": "-117.7418", "Quantity": "23,521" }, { "State": "California", "lat": "33.8996", "lon": "-118.3669", "Quantity": "26,169" }, { "State": "California", "lat": "34.0302", "lon": "-118.3865", "Quantity": "21,996" }, { "State": "California", "lat": "34.0569", "lon": "-117.2995", "Quantity": "59,135" }, { "State": "California", "lat": "34.0737", "lon": "-117.8859", "Quantity": "4,757" }, { "State": "California", "lat": "34.1820", "lon": "-118.3140", "Quantity": "28,909" }, { "State": "California", "lat": "34.2257", "lon": "-119.1551", "Quantity": "22,569" }, { "State": "California", "lat": "34.2300", "lon": "-118.5500", "Quantity": "22,413" }, { "State": "California", "lat": "34.4130", "lon": "-118.5036", "Quantity": "18,399" }, { "State": "California", "lat": "34.4813", "lon": "-117.3389", "Quantity": "23,268" }, { "State": "California", "lat": "34.6029", "lon": "-118.1464", "Quantity": "24,651" }, { "State": "California", "lat": "37.5038", "lon": "-121.9762", "Quantity": "4" }, { "State": "California", "lat": "38.3525", "lon": "-122.7148", "Quantity": "2" }, { "State": "Colorado", "lat": "38.4766", "lon": "-107.8812", "Quantity": "3,294" }, { "State": "Colorado", "lat": "39.0730", "lon": "-108.5710", "Quantity": "8,704" }, { "State": "Florida", "lat": "27.8400", "lon": "-82.6800", "Quantity": "75,066" }, { "State": "Florida", "lat": "27.9400", "lon": "-82.3200", "Quantity": "135,365" }, { "State": "Florida", "lat": "27.9600", "lon": "-82.3200", "Quantity": "-6" }, { "State": "Florida", "lat": "27.9925", "lon": "-82.7296", "Quantity": "27,274" }, { "State": "Florida", "lat": "28.0661", "lon": "-82.5688", "Quantity": "261" }, { "State": "Florida", "lat": "28.0790", "lon": "-80.6984", "Quantity": "15,720" }, { "State": "Florida", "lat": "28.0941", "lon": "-81.9738", "Quantity": "85,437" }, { "State": "Florida", "lat": "28.1918", "lon": "-82.3812", "Quantity": "97,233" }, { "State": "Florida", "lat": "28.3027", "lon": "-81.4216", "Quantity": "135,193" }, { "State": "Florida", "lat": "28.5622", "lon": "-81.2074", "Quantity": "120,424" }, { "State": "Florida", "lat": "28.6629", "lon": "-81.4176", "Quantity": "110,185" }, { "State": "Florida", "lat": "29.1800", "lon": "-81.0800", "Quantity": "66,725" }, { "State": "Georgia", "lat": "32.8100", "lon": "-83.7100", "Quantity": "3" }, { "State": "Georgia", "lat": "33.3671", "lon": "-84.7647", "Quantity": "87,508" }, { "State": "Georgia", "lat": "33.4600", "lon": "-84.2100", "Quantity": "155,811" }, { "State": "Georgia", "lat": "33.4759", "lon": "-82.0709", "Quantity": "10,875" }, { "State": "Georgia", "lat": "33.5600", "lon": "-84.5400", "Quantity": "17,937" }, { "State": "Georgia", "lat": "33.5610", "lon": "-84.3223", "Quantity": "203,297" }, { "State": "Georgia", "lat": "33.6810", "lon": "-84.1604", "Quantity": "134,700" }, { "State": "Georgia", "lat": "33.8200", "lon": "-84.3600", "Quantity": "122,120" }, { "State": "Georgia", "lat": "33.9168", "lon": "-83.4439", "Quantity": "84,648" }, { "State": "Georgia", "lat": "33.9522", "lon": "-84.1343", "Quantity": "105,862" }, { "State": "Georgia", "lat": "34.0051", "lon": "-84.5752", "Quantity": "-14" }, { "State": "Georgia", "lat": "34.0076", "lon": "-84.5769", "Quantity": "204,888" }, { "State": "Georgia", "lat": "34.0600", "lon": "-83.9800", "Quantity": "104,291" }, { "State": "Georgia", "lat": "34.1900", "lon": "-84.1200", "Quantity": "186,459" }, { "State": "Idaho", "lat": "42.9101", "lon": "-112.4605", "Quantity": "5,524" }, { "State": "Idaho", "lat": "43.6048", "lon": "-116.3496", "Quantity": "14,476" }, { "State": "Illinois", "lat": "41.5300", "lon": "-87.8500", "Quantity": "54,989" }, { "State": "Illinois", "lat": "41.7200", "lon": "-88.0300", "Quantity": "72,366" }, { "State": "Illinois", "lat": "42.0500", "lon": "-87.8300", "Quantity": "59,164" }, { "State": "Illinois", "lat": "42.1000", "lon": "-87.9700", "Quantity": "49,074" }, { "State": "Illinois", "lat": "42.1300", "lon": "-88.3300", "Quantity": "77,454" }, { "State": "Illinois", "lat": "42.2300", "lon": "-87.9300", "Quantity": "51,251" }, { "State": "Illinois", "lat": "42.2600", "lon": "-88.9700", "Quantity": "57,571" }, { "State": "Indiana", "lat": "39.6292", "lon": "-86.1252", "Quantity": "24,227" }, { "State": "Indiana", "lat": "39.6303", "lon": "-86.1249", "Quantity": "1,074" }, { "State": "Indiana", "lat": "39.7613", "lon": "-86.3488", "Quantity": "12,319" }, { "State": "Indiana", "lat": "39.7634", "lon": "-86.3489", "Quantity": "1,027" }, { "State": "Indiana", "lat": "40.0028", "lon": "-86.1227", "Quantity": "901" }, { "State": "Indiana", "lat": "41.4900", "lon": "-87.4700", "Quantity": "83,677" }, { "State": "Kentucky", "lat": "38.1438", "lon": "-85.6751", "Quantity": "-85" }];  
  22.             var data1 = [];  
  23.             var tmp = '';  
  24.             var formatedVal = 0;  
  25.             if (selectMap == "0") {  
  26.                 var H = Highcharts,  
  27.                              map = H.maps['countries/us/us-all'],  
  28.                                 chart;  
  29.             }  
  30.             else {  
  31.                 var H = Highcharts,  
  32.                                   map = H.maps[selectMap],  
  33.                                      chart;  
  34.             }  
  35.             $.each(jsdata, function (ix, entry) {  
  36.                 if (Object.keys(entry).length >= 4) {  
  37.                     tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');  
  38.                     if (isNaN(tmp)) {  
  39.                         entry.z = entry[zPoint];  
  40.                     }  
  41.                     else {  
  42.   
  43.                     }  
  44.                     data1.push(entry);  
  45.                 }  
  46.             });  
  47.             chart = $('#container').highcharts('Map', {  
  48.                 chart: {  
  49.                     borderWidth: 1  
  50.                 },  
  51.                 title: {  
  52.                     text: 'Bubble map'  
  53.                 },  
  54.                 subtitle: {  
  55.                     text: 'Bubble map sub title'  
  56.                 },  
  57.   
  58.                 tooltip: {  
  59.                     pointFormat: '{point.State}: {point.Quantity}'  
  60.                 },  
  61.   
  62.                 mapNavigation: {  
  63.                     enabled: true,  
  64.                     buttonOptions: {  
  65.                         verticalAlign: 'bottom'  
  66.                     }  
  67.                 },  
  68.                 xAxis: {  
  69.                 },  
  70.                 yAxis: {  
  71.                 },  
  72.                 legend: {  
  73.                     enabled: true,  
  74.                     title: {  
  75.                         style: {  
  76.                             color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
  77.                         }  
  78.                     },  
  79.                     layout: 'vertical',  
  80.                     align: 'right',  
  81.                     verticalAlign: 'bottom',  
  82.                     floating: true,  
  83.                     valueDecimals: 0,  
  84.                     valueSuffix: '$',  
  85.                     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
  86.                     symbolRadius: 0,  
  87.                     symbolHeight: 14  
  88.                 },  
  89.                 series: [{  
  90.                     mapData: map,  
  91.                     borderColor: '#E0E0E0',  
  92.                     colour: '#E0E0E0',  
  93.                     showInLegend: false,  
  94.                     enableMouseTracking: true,  
  95.                     cursor: 'pointer',  
  96.                     dataLabels: {  
  97.                         enabled: true,  
  98.                         format: '{point.properties.postal-code}',  
  99.                         textDecoration: 'none',  
  100.                         style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
  101.                     },  
  102.                     events: {  
  103.                         click: function (e) {  
  104.                             e.point.zoomTo();  
  105.                         }  
  106.                     },  
  107.                 },  
  108.                 {  
  109.                     type: 'mapbubble',  
  110.                     color: '#E0E0E0',  
  111.                     dataLabels: {  
  112.                         enabled: true,  
  113.                         formatter: function () {  
  114.                         }  
  115.                     },  
  116.                     enableMouseTracking: true,  
  117.                     joinBy: ['iso-a2', 'code'],  
  118.                     name: zPoint,  
  119.                     data: data1,  
  120.                     minSize: $("#mapMinBubSize").val(),  
  121.                     maxSize: $("#mapMaxBubSize").val(),  
  122.                     color: $("#mapColor").val(),  
  123.                     displayNegative: true,  
  124.                     sizeBy: 'width',  
  125.                     cursor: 'pointer',  
  126.                     negativeColor: Highcharts.getOptions().colors[0]  
  127.                 }  
  128.                 ],  
  129.                 chart: {  
  130.                     marginRight: 50  
  131.                 },  
  132.                 exporting: {  
  133.                     enabled: false  
  134.                 }  
  135.             });  
  136.         }  
  137.   
  138.     </script>  
  139. </head>  
  140. <body>  
  141.     Bubble Map Demo - SibeeshPassion  
  142.     <br />  
  143.     <br />  
  144.     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
  145.     <label>Min Bubble Size</label>  
  146.     <input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />  
  147.     <label>Max Bubble Size</label>  
  148.     <input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />  
  149.     <label>Color</label>  
  150.     <input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />  
  151.     <label>Select Map</label>  
  152.     <select name="tech" id="mapSelectMap" class="tech" title="Select Map.">  
  153.         <option value="0">Select Map</option>  
  154.         <option value="countries/us/us-all" selected="selected">US alone</option>  
  155.         <option value="custom/world">Custom World</option>  
  156.     </select>  
  157.     <div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>  
  158. </body>  
  159.   
  160. </html>  

Conclusion

Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot. J

Kindest Regards,


Similar Articles