Change google heat map points color based on value

Question

I need to color the different points in my heat map based on air quality index(aqi) for that point. This is my first attempt at creating a heat map and my supervisor insists that I create it using only google heat maps. I am getting the data from a JSON object that is passed from a view in python to my HTML template. I read that google heat maps are based on density not value however density is not a factor in my case. I have been searching around and have found a few similar questions: Coloring Google Heat Maps in different colors but no one has answered it yet. I would like to color the points according to aqi values such as:

• 0-50 green
• 51-100 yellow
• 101-150 orange
• 151-200 red
• 201-300 violet

my JSON data looks like this:

{
  "lat": 44.0682019, 
  "data_value": {"pm10": "0","pm25": "21"}, 
  "lon": -114.7420408, 
  "aqi": 70.0
}

Here is my javascript code:

<script>     
      var json_data = {{ data|safe }};
      var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: 0, lng: 0},
          minZoom: 2, 
          maxZoom: 18

        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          radius: 50,
          dissapating: false,
          map: map
        });
      }

      function changeGradient() {
        var gradient = [
          '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)'
        ]
        heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
      }

      function changeRadius() {
        heatmap.set('radius', heatmap.get('radius') ? null : 50);
      }

      function changeOpacity() {
        heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
      }
      function getPoints() {
        var location = [];
        for(var i = 0; i < json_data.length; i++) {
          var obj = json_data[i];
          if(obj.aqi < 150) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 1)};
          } else if(obj.aqi > 150 && obj.aqi < 300) {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 5)};
          } else {
            location[i] = {location: new google.maps.LatLng(obj.lat, obj.lon), weight:Math.pow(obj.aqi, 10)};
          }

        }
        return location;
      }
</script>

I was playing around with the weight to try and get it to reflect the change in values instead of density but I still did not get the desired results.

Thank you in advance for all your help.

Answer 1

I assume that you understand the basics of how the google heat maps works. So basically the solution i got, was to create different arrays based on the number of colors you want, and also create different heatmap variables based still on the colors. I admit its not the best solution (performance wise) but its does the trick. Unlike you, I am using data from a database which am pulling using Php, but the logic remains the same. here is my code:

var dataheat = [];
var dataheat1 = [];
var dataheat2 = [];



function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: new google.maps.LatLng(-25.7479, 28.2293),
  mapTypeId: 'satellite',
  zoom: 6,
  maxZoom: 16,
  minZoom: 6
 });



 // pull data from database using php
  downloadUrl('location.php', function(data) {
  var xml = data.responseXML;

var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {

  var  aqi =  parseFloat(markerElem.getAttribute('aqi'));
  var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));


  for (var i=0; i <= markers.length; i++)
  {
    if(aqi < 98)
      {dataheat.push(point);}
    else if( aqi > 98 && aqi < 100)
      {dataheat1.push(point);}
    else if (aqi = 100)
     { dataheat2.push(point);}
    else{
        //nothing
    }

  }


});

   var yellow = [
            'rgba(255, 255, 0, 0)',
            'rgba(255, 255, 0, 1)'
            ];

  var red = [
        'rgba(255, 0, 0, 0)',
        'rgba(255, 0, 0, 1)'
        ];

  var green = [
          'rgba(0, 255, 0, 0)',
          'rgba(0, 255, 0, 1)'
          ];

 var heatmap = new google.maps.visualization.HeatmapLayer({

      data: dataheat,
      map:map,
      radius: 24

});
  var heatmap1 = new google.maps.visualization.HeatmapLayer({

      data: dataheat1,
      map:map,
      radius: 24

});
   var heatmap2 = new google.maps.visualization.HeatmapLayer({

      data: dataheat2,
      map:map,
      radius: 24

});

heatmap.set('gradient', heatmap.get('gradient') ? null : red);
heatmap1.set('gradient', heatmap1.get('gradient') ? null : yellow);
heatmap2.set('gradient', heatmap2.get('gradient') ? null : green);


   });
  }

  function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
  new ActiveXObject('Microsoft.XMLHTTP') :
  new XMLHttpRequest;

  request.onreadystatechange = function() {
  if (request.readyState == 4) {
  request.onreadystatechange = doNothing;
  callback(request, request.status);
  }
 };

  request.open('GET', url, true);
  request.send(null);
   }

  function doNothing() {}