CODEWITHSUNDEEP
javascriptgoogle-maps-api-3heatmap
jacobsowles
jacobsowles

Reputation: 3003

Making Google Heatmap datapoints darker

I have a heatmap with around 300 points in it that looks great when zoomed out. The problem is that all data points are inside a single (albeit large) building, so in most cases, users are going to zoom all the way in. At that zoom level, the data points get so dark that they're barely visible, especially the areas where there aren't as many. Is there any way to brighten them up?

These are my current settings (gradient is straight from the official docs):

var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    radius: 15,
    opacity: 1,
    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)'
    ]
});

I tried using (much) darker colors in the gradient, but the data points were still very light, as though an opacity of less than 1 was being applied, even though I have the opacity set to 1.

Any idea how I can make my data points darker?

Upvotes: 1

Views: 784

Answers (1)

jacobsowles
jacobsowles

Reputation: 3003

Playing around with maxIntensity was the answer. It limited the disparity in intensity between my data points, which made my lightest points darker.

Upvotes: 1

Related Questions