How to customize heatmap color on pre decided constraint values?

Question

I am working on heatmap and situation is i have to change the color of heat map marker on the basis of some constraints and the color should change according to those basic constraints values. My approach is this:

function HeatMapCreate(heatMapData, GetNumberFromString)
    //  heatMapData contains the object of LatLng and get number is the   constraint
    // which contains a number on the basis of which we set color
    // (green if 48 and red if 36 else yellow)
        {
            var gradient;
            var heatmap = new google.maps.visualization.HeatmapLayer(
                        {
                            data: heatMapData,
                        });
            heatmap.setOptions({ radius: heatmap.get('20') });

            if (GetNumberFromString == 36)
            {
                gradient = [For red color]
            }
            else if(GetNumberFromString == 48)
            {
             gradient = [For green color]
            }
            else
            {
                gradient = [For yellow color]

            }

            heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
            heatmap.setMap(map);
        }

How to achieve this ? I am bit surprised there is not a single answer (even comment) to this answer, that makes me feel either question is too bad or it is impossible to have heatmap markers of different color ? Could some one please help me ?

Answer 1

Your penultimate line of code looks like you've just copied it from Google's example which demonstrates toggling between two gradients.

heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);

It's not the best example to be honest; they're really either setting the gradient to the one they've specified, or setting it to null, ie defaulting the gradient back to Google's default colour scheme.

Instead what you want to do is have all your own gradients defined already, and then toggle between them in response to the GetNumberFromString value. Here's an untested example. I've gone with a 'blue' colour for the last one, just because it was easier! You probably want to come up with your own set of colours; I expect there's online tools that can produce these for you quite quickly, eg http://angrytools.com/gradient/

function HeatMapCreate(heatMapData, GetNumberFromString) {
    var gradients = {
        red: [
            'rgba(255, 0, 0, 0)',
            'rgba(255, 0, 0, 1)'
        ],
        green: [
            'rgba(0, 255, 0, 0)',
            'rgba(0, 255, 0, 1)'
        ],
        blue: [
            'rgba(0, 0, 255, 0)',
            'rgba(0, 0, 255, 1)'
        ]
    };
    var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatMapData,
        radius: 20,
        map: map
    });

    switch (GetNumberFromString) {
        case 36:
            heatmap.set('gradient', gradients['red']);
            break;
        case 48:
            heatmap.set('gradient', gradients['green']);
            break;
        default:
            heatmap.set('gradient', gradients['blue']);
            break;

    }
}

See also: https://developers.google.com/maps/documentation/javascript/heatmaplayer

Answer 2

You cannot implement different colors with a single heat map. You will have to use an individual heatmap layer for each color you intend to show based on the GetNumberFromString functions return value.

Check out the code below.

function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapProp = {
    center: new google.maps.LatLng(40.785091, -73.968285),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  codeAddress("10001", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');
  codeAddress("10002", 'rgba(255, 255, 0, 0)', 'rgba(255, 255, 0, 1)');
  codeAddress("10003", 'rgba(255, 0, 0, 0)', 'rgba(255, 0, 0, 1)');
  codeAddress("10004", 'rgba(0, 255, 0, 0)', 'rgba(0, 255, 0, 1)');
  codeAddress("10005", 'rgba(153, 0, 153, 0)', 'rgba(153, 0, 153, 1)');
  codeAddress("10006", 'rgba(1, 1, 0, 0)', 'rgba(1, 1, 0, 1)');

  function codeAddress(zip, rgbA1, rgbA2) {
    //var address = document.getElementById("address").value;
    geocoder.geocode({
      'address': zip
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);

        var hotSpot = results[0].geometry.location;

        var heatMapZip = [{
            location: hotSpot
          }

        ];

        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatMapZip,
          radius: 20,
          dissapating: false
        });

        var gradient = [rgbA1, rgbA2];
        heatmap.set('gradient', gradient);
        heatmap.setMap(map);

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }


}

google.maps.event.addDomListener(window, 'load', initialize);