javascript - How to dynamically compute the radius for heatmap.js according to the data -


i'm using leafleat , heatmap.js api (the new 2.x version). there trouble setting radius value. i'm trying perform bandwidth selection methods of kernel density , unfavourable result. there reasonable way compute radius according characteristics of spatial distribution data?

the question how dynamically compute appropriate radius or other parameters generate smooth heatmap if distribution badly sparse ?

here demo example:

 <script>     window.onload = function () {         var baselayer = l.tilelayer(                 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {                     attribution: 'copyright &copy; 2015',                     maxzoom: 22,                     minzoom: 10                 }         );         var cfg = {             "blur": .85,             "maxopacity": .75,             "minopacity": 0.02,             // scales radius based on map zoom             "scaleradius": true,             // if set false heatmap uses global maximum colorization             // if activated: uses data maximum within current map boundaries             //   (there red spot uselocalextremas true)             "uselocalextrema": true,             // field name in data represents latitude - default "lat"             latfield: 'lat',             // field name in data represents longitude - default "lng"             lngfield: 'lng',             // field name in data represents data value - default "value"             valuefield: 'count'             ,             gradient: {                 0.0: "rgba(000,000,255,0)",                 0.1: "rgba(000,000,255,1)",                 0.2: "rgba(000,255,000,1)",                 0.5: "rgba(000,255,000,1)",                 0.8: "rgba(255,255,000,1)",                 1.0: "rgba(255,000,000,1)"             }         };         /*  legend code */         // want display gradient, have draw         var legendcanvas = document.createelement('canvas');         legendcanvas.width = 100;         legendcanvas.height = 10;         var legendctx = legendcanvas.getcontext('2d');         var gradientcfg = {};         var heatmaplayer = new heatmapoverlay(cfg);         var southwest = l.latlng(15.78, 73.5577),                 northeast = l.latlng(53.56086, 134.7739),                 bounds = l.latlngbounds(southwest, northeast);         var map = new l.map('map_l', {             center: new l.latlng(36.105215, 120.384428),             zoom: 11,             maxbounds: bounds,             layers: [baselayer, heatmaplayer]         });          function getrandomarbitrary(min, max) {             return math.random() * (max - min) + min;         }          // generate 1000 datapoints         // randomly generate extremas         var t = [];         var iii;         (iii = 0; iii < 1000; iii++) {             var xx = getrandomarbitrary(119.5, 120.5);             var yy = getrandomarbitrary(36, 36.2);             var cc = getrandomarbitrary(1, 1000);             // btw, can set radius on point basis             var rr = getrandomarbitrary(0.001, 0.005);             // add dataset             t.push({lng: xx, lat: yy, count: cc, radius: rr});         }         heatmaplayer.setdata({min: 1, max: 1000, data: t});     }; </script> 


Comments

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -