CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsangular-google-maps
MattDionis
MattDionis

Reputation: 3616

How to use heatmapLayer within Angular-Google-Maps?

I'm trying to get the heatmapLayer working in my map built with angular-google-maps. I have setup my HTML in the following way:

<ui-gmap-google-map center='playerMap.center' zoom='playerMap.zoom'>
  <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="true" onCreated="playerMap.heatmapCallback()"></ui-gmap-layer>
  <ui-gmap-markers
    models="playerMap.markers"
    coords="'self'"
    icon="'icon'"
    fit="true"
    doCluster="playerMap.cluster"
    options="'options'"
    click="playerMap.showWindow()"
    events="playerMap.markersEvents">
    <ui-gmap-window
      show="playerMap.window.show"
      coords="playerMap.window.model"
      options="playerMap.window.options"
      closeclick="playerMap.window.closeClick()"
      templateUrl="'/app/dmPlayerMap/infoWindow.html'"
      templateParameter="playerMap.window">
    </ui-gmap-window>
  </ui-gmap-markers>
</ui-gmap-google-map>

I'm confused as to what I should put in my playerMap.heatmapCallback() method and anything else I need to do to setup a basic heatmap. The documentation is sorely lacking in this area.

Upvotes: 1

Views: 3991

Answers (1)

Enrique Aparicio
Enrique Aparicio

Reputation: 807

The idea is to use playerMap.heatmapCallback (without brackets, NO playerMap.heatmapCallback()) to create the points for the heat layer.

This is one example:

in the HTML

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="map.showHeat" onCreated="map.heatLayerCallback"></ui-gmap-layer>
</ui-gmap-google-map>

in the controller

function MockHeatLayer(heatLayer) {
    // Adding 500 Data Points
    var map, pointarray, heatmap;

    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)
    ];


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

$scope.map = {
            center: {
            latitude: 37.782551,
            longitude: -122.445368
            },
            zoom: 12,
            heatLayerCallback: function (layer) {
                //set the heat layers backend data
                var mockHeatLayer = new MockHeatLayer(layer);
                },
            showHeat: true
        };

You can get more point from here

Cheers!

Upvotes: 5

Related Questions