How does Google Heatmaps detect color and use it in a drawing?

I need to display certain values ​​in different places, these values ​​I represent it as weight and send using latlng coordinates. I need to know how Google calculates the color to change my results, for example, do I specify a color for each value or know how I can get Google to choose the right color for my value? can someone help me please?

 var gradient3 = [
     'rgba(0, 255, 255, 0)',
     'rgba(0, 255, 255, 1)',
     'rgba(0, 191, 255, 1)',
     'rgba(0, 127, 255, 1)',
     'rgba(0, 63, 255, 1)',
     'rgba(0, 0, 255, 1)',
     'rgba(0, 0, 223, 1)',
     'rgba(0, 0, 191, 1)',
     'rgba(0, 0, 159, 1)',
     'rgba(0, 0, 127, 1)',
     'rgba(63, 0, 91, 1)',
     'rgba(127, 0, 63, 1)',
     'rgba(191, 0, 31, 1)',
     'rgba(255, 0, 0, 1)'
 ]

 function initialize() {

     //set some map options
     var mapOptions = {
         zoom: 6,
         center: new google.maps.LatLng(37.774546, -122.433523),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     //get a reference to the map area
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
     patdata = [];
     for (var i = 0; i < locationList.length; i++) {
         var args = locationList[i].split(",");
         patdata.push({
             location: new google.maps.LatLng(args[0], args[1]),
             weight: args[2]
         });
     }

     heatmap = new google.maps.visualization.HeatmapLayer({
         data: patdata
     });
     heatmap.setOptions({
         //apply the gradient
         gradient: heatmap.get('gradient') ? null : gradient3,
         // set other options
         maxIntensity: 25, //The maximum intensity of the heatmap
         opacity: 0.8, //The opacity of the heatmap
         radius: 8, //The radius of influence for each data point, in pixels.
         //dissipating: true    //Specifies whether heatmaps dissipate on zoom
     });
     heatmap.setMap(map);
+4
source share

Source: https://habr.com/ru/post/1539593/


All Articles