HowTo create legend for google Heatmap?

Question

I have drawn heatmap using Google maps API v3 with the DB application at the backend.

Cool, I see green.->.yellow.->.red fradient over my map. Looks fine!

But how can I get values for these colors?

What's avg weight for light-green color and dark-red?

Can I implement such "legend" using goolge API or I need to write some kind of custom JS functionality?

Answer 1

As of today, there seems to be no official way to obtain the heatmap legend through the API which means you're on your own here. To construct the legend you'll need the following two ingredients.

1. The definition of the heatmap's gradient colors
2. The maximum density - that is the high end of the legend (the low end is always 0)

Prerequisites

The following code snippets will assume that your HTML contains containers for the legend and the legend's gradient and that you have created a valid map and heatmap.

<div id="map"></div>
<div id="legend">
    <div id="legendGradient"></div>
</div>
<script type="text/javascript">
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            ...
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: ...
        });

        heatmap.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The Gradient

The heatmap actually contains a property gradient which is, however, not populated for the default gradient but only holds those gradient specifications that you have assigned manually to the heatmap. Hence, in order to obtain the exact gradient specifications, you'll need to define the colors yourself. Afterwards you can simply draw the gradient in the legend using CSS.

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

heatmap.set('gradient', gradient);

var gradientCss = '(left';
for (var i = 0; i < gradient.length; ++i) {
    gradientCss += ', ' + gradient[i];
}
gradientCss += ')';

$('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
$('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
$('#legendGradient').css('background', 'linear-gradient' + gradientCss);

The Maximum Density

The maximum density is not available officially through the API. However, logic tells us that the value must be stored somewhere on the object. Doing a little research with Chrome's JavaScript console I found the value stored under heatmap['gm_bindings_']['data'][158]['kd']['D']. The value will, however, only be set after the map has rendered. Thus, you'll need to wrap your access to the field into a tilesloaded event-handler.

Once you got the maximum density, it's straightforward to generate ticks and labels for the legend. The following snippet creates ticks and labels beneath the legend's gradient which is assumed to be 15px in height.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    var maxIntensity = heatmap['gm_bindings_']['data'][158]['kd']['D'];
    var legendWidth = $('#legendGradient').outerWidth();

    for (var i = 0; i <= maxIntensity; ++i) {
        var offset = i * legendWidth / maxIntensity;
        if (i > 0 && i < maxIntensity) {
            offset -= 0.5;
        } else if (i == maxIntensity) {
            offset -= 1;
        }

        $('#legend').append($('<div>').css({
            'position': 'absolute',
            'left': offset + 'px',
            'top': '15px',
            'width': '1px',
            'height': '3px',
            'background': 'black'
        }));
        $('#legend').append($('<div>').css({
            'position': 'absolute',
            'left': (offset - 5) + 'px',
            'top': '18px',
            'width': '10px',
            'text-align': 'center'
        }).html(i));
    }
});

Wrapping Things Up

A working example of the above code can be found on JSFiddle.

Please note that the way the maximum density is determined is completely unofficial and undocumented. It might not work in future versions of the API and even in the current version it might not work in all cases.