Geek Answers Handbook

Map Animated Maps Google Maps

I was wondering if it is possible to animate the heat map that I set up for my Google Map. It was easy enough to set up a google map and add a heat map to it. But it looks pretty boring. I wanted to add some pulse effects to the heat map. Thanks

+5
source share
2 answers

It is just to enliven the look of the heatmap. The following example sets up a custom array of gradient colors and modulates its size. The result is a kind of pulsating effect. You can adjust the colors to your liking in the function modulateGradientor even add changes to the opacity of the heat map. Please note, however, that depending on the size of your dataset, animation can have a significant impact on performance.

HTML

<div id="map-canvas"></div>

Js

var map, pointarray, heatmap;
var gradient, gradientStep = -1;

var taxiData = [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586),
    new google.maps.LatLng(37.782842, -122.443688),
    new google.maps.LatLng(37.782919, -122.442815),
    new google.maps.LatLng(37.782992, -122.442112),
    new google.maps.LatLng(37.783100, -122.441461),
    new google.maps.LatLng(37.783206, -122.440829),
    new google.maps.LatLng(37.783273, -122.440324),
    new google.maps.LatLng(37.783316, -122.440023),
    new google.maps.LatLng(37.783357, -122.439794),
    new google.maps.LatLng(37.783371, -122.439687)
];

function initialize() {
    var mapOptions = {
        zoom: 13,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var pointArray = new google.maps.MVCArray(taxiData);

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

    heatmap.setMap(map);
    setGradient();

    google.maps.event.addListenerOnce(map, 'tilesloaded', modulateGradient);
}

function setGradient() {
    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', gradient);
}

function modulateGradient() {
    var modulator = function() {
        var newGradient = gradient.slice(0, heatmap.get('gradient').length + gradientStep);

        if (newGradient.length == gradient.length || newGradient.length == 7) {
            gradientStep *= -1;
        }

        heatmap.set('gradient', newGradient);

        setTimeout(modulator, 100);
    };

    setTimeout(modulator, 100);
}

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

You can find the live version of the code in JSFiddle .

+2
source

You can create a kind of impulse effect by changing the size of the radius of the heat map layer.

First give make var smallRadiusand var bigRadiusset the values ​​for them; egsmallRadius = 40; bigRadius = 80;

var mapOptions smallRadius.

animateRadius(), smallRadius bigRadius, smallRadius, smallRadius.

, setInterval().

, :

var smallRadius = 40;
var bigRadius = 80;

    var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.774546, -122.433523),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            radius: smallRadius
        };

//animate radius function

setInterval(function animateRadius()
         {
             if (heatMap.get('radius') === smallRadius)
            {
                heatMap.set('radius', bigRadius);
            }
            else
            {
                heatMap.set('radius', smallRadius);
            }
         }, 1000); // changes radius every 1 second

, smallRadius bigRadius , .

0

More articles:


All Articles