آموزش کار با نقشه حبابی در Aps.Net

در این مقاله میخواهیم توضیحی در باره چگونگی پیاده سازی نقشه حبابی درسایت ها، مطابق با اطلاعات برنامه خود بدهیم

نقشه حبابی چیست ؟ نقشه حبابی به عنوان ابزاری برای رسم و اندازه گیری مکان جغرافیایی هر کشور، در نقشه ی مخصوص به خود آن کشوراست در نقشه حبابی میتوان ارزش اندازه گیری شده را افزایش داد و به کاربر میتوان این اجازه داده شود که مکان جغرافیایی را در اندازه دلخواه خود ببیند
دراین مثال نیز این امکان وجود دارد که شما حباب های موجود در نقشه را با هر رنگ دلخواه خود ببینید
برای شروع به کار شما نیاز به اضافه کردن script های زیر در برنامه خود دارید

    <script src="Scripts/jquery-1.11.1.min.js"></script>  
    <script src="Scripts/highmaps.js"></script>  
    <script src="Scripts/proj4.js"></script>  
    <script src="Scripts/us-all.js"></script>  
    <script src="Scripts/world.js"></script>

اکنون شروع به ثبت داده به در برنامه خود میکنیم


    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" }]

اکنون داده هایی را که ثبت کردیم باید چک کنیم که آیا این داده هایی را که وارد کردیم درست است یا نه . در واقع در نقشه حبابی اگر دادهایی نا مربوط به موقعیت جغرافیایی آن کشور یا شهر را وارد کنیم باعث جلگویری از اجرای نقشه میشود بنابراین برای رفع این مشکل بهتر است همانند کد زیر بررسی میکنیم که آیا داده های لازم برای پیاده سازی یک نقشه وارد شده است یا نه که من در اینجا 4 پارامتر لازم برای رسم یک نقشه برای شما به عنوان مثال فراهم آوردم

1-نام کشور یا استان 2- طول جغرافیایی 3 – عرض جغرافیایی 4- جمعیت

$.each(jsdata, function (ix, entry)   
{    
                if (Object.keys(entry).length >= 4)   
                {    
                    tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');    
                    if (isNaN(tmp)) {    
                        entry.z = entry[zPoint];    
                    }    
                    else {    
    
                    }    
                    data1.push(entry);    
                }    
});

اکنون کد پباده سازی نقشه، در زیر آورده شده است

    chart = $('#container').highcharts('Map', {  
                   chart: {  
                       borderWidth: 1  
                   },  
                   title: {  
                       text: 'Bubble map'  
                   },  
                   subtitle: {  
                       text: 'Bubble map sub title'  
                   },  
      
                   tooltip: {  
                       pointFormat: '{point.State}: {point.Quantity}'  
                   },  
      
                   mapNavigation: {  
                       enabled: true,  
                       buttonOptions: {  
                           verticalAlign: 'bottom'  
                       }  
                   },  
                   xAxis: {  
                   },  
                   yAxis: {  
                   },  
                   legend: {  
                       enabled: true,  
                       title: {  
                           style: {  
                               color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
                           }  
                       },  
                       layout: 'vertical',  
                       align: 'right',  
                       verticalAlign: 'bottom',  
                       floating: true,  
                       valueDecimals: 0,  
                       valueSuffix: '$',  
                       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
                       symbolRadius: 0,  
                       symbolHeight: 14  
                   },  
                   series: [{  
                       mapData: map,  
                       borderColor: '#E0E0E0',  
                       colour: '#E0E0E0',  
                       showInLegend: false,  
                       enableMouseTracking: true,  
                       cursor: 'pointer',  
                       dataLabels: {  
                           enabled: true,  
                           format: '{point.properties.postal-code}',  
                           textDecoration: 'none',  
                           style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
                       },  
                       events: {  
                           click: function (e) {  
                               e.point.zoomTo();  
                           }  
                       },  
                   },  
                   {  
                       type: 'mapbubble',  
                       color: '#E0E0E0',  
                       dataLabels: {  
                           enabled: true,  
                           formatter: function () {  
                           }  
                       },  
                       enableMouseTracking: true,  
                       joinBy: ['iso-a2', 'code'],  
                       name: zPoint,  
                       data: data1,  
                       minSize: $("#mapMinBubSize").val(),  
                       maxSize: $("#mapMaxBubSize").val(),  
                       color: $("#mapColor").val(),  
                       displayNegative: true,  
                       sizeBy: 'width',  
                       cursor: 'pointer',  
                       negativeColor: Highcharts.getOptions().colors[0]  
                   }  
                   ],  
                   chart: {  
                       marginRight: 50  
                   },  
                   exporting: {  
                       enabled: false  
                   }  
               }

همامن طور که در کد بالا میبنید چندتا متغیر تعریف کردیم که مقدار های ورودی را درآن ها قرار می دهیم مثل ("#mapMinBubSize").val(). یک منتغیر مهم تر در کد های قبل به نام zPoint میبنید که درآن تعداد افزایش یا کاهش حباب ها را بررسی می کند .

var zPoint = "Quantity";

ما یک تابع برای اجرای نقشه پیاده سازی میکنیم


    $(function () {  
               loadMap();              
           }); 
حال در کد زیر تابع اجرای نقشه را کامل میکنیم

    function loadMap() {  
              var selectMap = $.trim($("#mapSelectMap").val());  
              var zPoint = "Quantity";  
              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" }];  
              var data1 = [];  
              var tmp = '';  
              var formatedVal = 0;  
              if (selectMap == "0") {  
                  var H = Highcharts,  
                               map = H.maps['countries/us/us-all'],  
                                  chart;  
              }  
              else {  
                  var H = Highcharts,  
                                    map = H.maps[selectMap],  
                                       chart;  
              }  
              $.each(jsdata, function (ix, entry) {  
                  if (Object.keys(entry).length >= 4) {  
                      tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');  
                      if (isNaN(tmp)) {  
                          entry.z = entry[zPoint];  
                      }  
                      else {  
      
                      }  
                      data1.push(entry);  
                  }  
              });  
              chart = $('#container').highcharts('Map', {  
                  chart: {  
                      borderWidth: 1  
                  },  
                  title: {  
                      text: 'Bubble map'  
                  },  
                  subtitle: {  
                      text: 'Bubble map sub title'  
                  },  
      
                  tooltip: {  
                      pointFormat: '{point.State}: {point.Quantity}'  
                  },  
      
                  mapNavigation: {  
                      enabled: true,  
                      buttonOptions: {  
                          verticalAlign: 'bottom'  
                      }  
                  },  
                  xAxis: {  
                  },  
                  yAxis: {  
                  },  
                  legend: {  
                      enabled: true,  
                      title: {  
                          style: {  
                              color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
                          }  
                      },  
                      layout: 'vertical',  
                      align: 'right',  
                      verticalAlign: 'bottom',  
                      floating: true,  
                      valueDecimals: 0,  
                      valueSuffix: '$',  
                      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
                      symbolRadius: 0,  
                      symbolHeight: 14  
                  },  
                  series: [{  
                      mapData: map,  
                      borderColor: '#E0E0E0',  
                      colour: '#E0E0E0',  
                      showInLegend: false,  
                      enableMouseTracking: true,  
                      cursor: 'pointer',  
                      dataLabels: {  
                          enabled: true,  
                          format: '{point.properties.postal-code}',  
                          textDecoration: 'none',  
                          style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
                      },  
                      events: {  
                          click: function (e) {  
                              e.point.zoomTo();  
                          }  
                      },  
                  },  
                  {  
                      type: 'mapbubble',  
                      color: '#E0E0E0',  
                      dataLabels: {  
                          enabled: true,  
                          formatter: function () {  
                          }  
                      },  
                      enableMouseTracking: true,  
                      joinBy: ['iso-a2', 'code'],  
                      name: zPoint,  
                      data: data1,  
                      minSize: $("#mapMinBubSize").val(),  
                      maxSize: $("#mapMaxBubSize").val(),  
                      color: $("#mapColor").val(),  
                      displayNegative: true,  
                      sizeBy: 'width',  
                      cursor: 'pointer',  
                      negativeColor: Highcharts.getOptions().colors[0]  
                  }  
                  ],  
                  chart: {  
                      marginRight: 50  
                  },  
                  exporting: {  
                      enabled: false  
                  }  
              });  
          }

حال اگر از برنامه اجرا بگیرید خروجی زیر را میبیند

قطعه کد زیر برای نوار tooltip روی نقشه به کار میرود شما میتوایند انواع دادهای مختلفی به آن بدهید اما در این جا من فقط نام شهر و جمعیت را در tooltip نقشه گذاشتم

    tooltip: {  
                       pointFormat: '{point.State}: {point.Quantity}'  
              },

نکته بعدی که باید گفته شود این است که ما باید عناصری که کاربر پسند باشد مثل تغیر رنگ ، تغیر اندازه حباب ها و.. را به برنامه خود اضافه کنیم

  
   
     
   <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   <label>Min Bubble Size</label>  
   <input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />  
   <label>Max Bubble Size</label>  
   <input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />  
   <label>Color</label>  
   <input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />  
   <label>Select Map</label>  
   <select name="tech" id="mapSelectMap" class="tech" title="Select Map.">  
       <option value="0">Select Map</option>  
       <option value="countries/us/us-all" selected="selected">US alone</option>  
       <option value="custom/world">Custom World</option>  
   </select>  
   <div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>

و ما نیاز داریم به یک تابع که در انتها ،کاربر بتواند تنظیمات خود را در برنامه ذخیره کند

    $('#apply').click(function () {  
                   loadMap();  
               });

و در آخر تصویری از کد هایی که توضیح دادیم را براتون گذاشتم

!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Bubble Map Demo - SibeeshPassion</title>  
    <script src="Scripts/jquery-1.11.1.min.js"></script>  
    <script src="Scripts/highmaps.js"></script>  
    <script src="Scripts/proj4.js"></script>  
    <script src="Scripts/us-all.js"></script>  
    <script src="Scripts/world.js"></script>  
  
    <script>  
        $(function () {  
            loadMap();  
            $('#apply').click(function () {  
                loadMap();  
            });  
        });  
        function loadMap() {  
            var selectMap = $.trim($("#mapSelectMap").val());  
            var zPoint = "Quantity";  
            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" }];  
            var data1 = [];  
            var tmp = '';  
            var formatedVal = 0;  
            if (selectMap == "0") {  
                var H = Highcharts,  
                             map = H.maps['countries/us/us-all'],  
                                chart;  
            }  
            else {  
                var H = Highcharts,  
                                  map = H.maps[selectMap],  
                                     chart;  
            }  
            $.each(jsdata, function (ix, entry) {  
                if (Object.keys(entry).length >= 4) {  
                    tmp = entry[zPoint].replace(/\,/g, '').replace(/\$/g, '').replace(/\%/g, '').replace(/\(/g, '').replace(/\)/g, '');  
                    if (isNaN(tmp)) {  
                        entry.z = entry[zPoint];  
                    }  
                    else {  
  
                    }  
                    data1.push(entry);  
                }  
            });  
            chart = $('#container').highcharts('Map', {  
                chart: {  
                    borderWidth: 1  
                },  
                title: {  
                    text: 'Bubble map'  
                },  
                subtitle: {  
                    text: 'Bubble map sub title'  
                },  
  
                tooltip: {  
                    pointFormat: '{point.State}: {point.Quantity}'  
                },  
  
                mapNavigation: {  
                    enabled: true,  
                    buttonOptions: {  
                        verticalAlign: 'bottom'  
                    }  
                },  
                xAxis: {  
                },  
                yAxis: {  
                },  
                legend: {  
                    enabled: true,  
                    title: {  
                        style: {  
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'  
                        }  
                    },  
                    layout: 'vertical',  
                    align: 'right',  
                    verticalAlign: 'bottom',  
                    floating: true,  
                    valueDecimals: 0,  
                    valueSuffix: '$',  
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',  
                    symbolRadius: 0,  
                    symbolHeight: 14  
                },  
                series: [{  
                    mapData: map,  
                    borderColor: '#E0E0E0',  
                    colour: '#E0E0E0',  
                    showInLegend: false,  
                    enableMouseTracking: true,  
                    cursor: 'pointer',  
                    dataLabels: {  
                        enabled: true,  
                        format: '{point.properties.postal-code}',  
                        textDecoration: 'none',  
                        style: { "color": "darkgrey", "fontWeight": "bold", "HcTextStroke": "0px rgba(0,0,0,0.5)" }  
                    },  
                    events: {  
                        click: function (e) {  
                            e.point.zoomTo();  
                        }  
                    },  
                },  
                {  
                    type: 'mapbubble',  
                    color: '#E0E0E0',  
                    dataLabels: {  
                        enabled: true,  
                        formatter: function () {  
                        }  
                    },  
                    enableMouseTracking: true,  
                    joinBy: ['iso-a2', 'code'],  
                    name: zPoint,  
                    data: data1,  
                    minSize: $("#mapMinBubSize").val(),  
                    maxSize: $("#mapMaxBubSize").val(),  
                    color: $("#mapColor").val(),  
                    displayNegative: true,  
                    sizeBy: 'width',  
                    cursor: 'pointer',  
                    negativeColor: Highcharts.getOptions().colors[0]  
                }  
                ],  
                chart: {  
                    marginRight: 50  
                },  
                exporting: {  
                    enabled: false  
                }  
            });  
        }  
  
    </script>  
</head>  
<body>  
    Bubble Map Demo - SibeeshPassion  
    <br />  
    <br />  
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
    <label>Min Bubble Size</label>  
    <input type="number" value="8" min="1" id="mapMinBubSize" title="Type Bubble Min Size." />  
    <label>Max Bubble Size</label>  
    <input type="number" min="1" value="40" id="mapMaxBubSize" title="Type Bubble Max Size." />  
    <label>Color</label>  
    <input type="color" value="#BAD6F2" id="mapColor" title="Select Bubble Color." />  
    <label>Select Map</label>  
    <select name="tech" id="mapSelectMap" class="tech" title="Select Map.">  
        <option value="0">Select Map</option>  
        <option value="countries/us/us-all" selected="selected">US alone</option>  
        <option value="custom/world">Custom World</option>  
    </select>  
    <div id="apply" style="cursor: pointer; background-color: red; color: white; width: 100px; padding: 5px; float: right;">Apply Settings</div>  
</body>  
  
</html>

فایل های ضمیمه

myCharts in Asp.zip

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

آموزش کار با نقشه حبابی در Aps.Net

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید