NgMap and Heatmap with async data

Question

I'm having trouble consolidating NgMaps and the Heatmaps from Google Maps API.

If I load the data from a script tag, it works fine just like in the NgMap example.

But if I try to create the data array locally, it won't work and it will give me an invalid heatmap data <heatmap-layer id="foo" data="pointArray"> error.

The aim is to be able to update the array on the fly, and to update the map and the heatmap when necessary.

This is what I've tried so far:

HTML:

<ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE" >
   <heatmap-layer id="foo" data="pointArray"></heatmap-layer>
</ng-map>

AngularJS:

$scope.outbreak = [
  [21.088, 92.19862],
  [21.08866, 92.19874],
  [21.08869, 92.19872],
  [21.08865, 92.19875],
  [21.08765, 92.19865],
  [21.08752, 92.1981],
  [21.08853, 92.19803],
  [21.08883, 92.19724],
  [21.08896, 92.19658],
  [21.08888, 92.19656],
  [21.08718, 92.19678],
  [21.08965, 92.19624],
  [21.08977, 92.19625],
  [21.08958, 92.19656],
  [21.08999, 92.19677],
  [21.09024, 92.19709],
  [21.09059, 92.19672],
  [21.09092, 92.19645],
  [21.09088, 92.19643],
  [21.09083, 92.19574]
];

$scope.renderHeatMap = function() {

    var heatmap, vm = this;

    NgMap.getMap().then(function(map) {
      var outbreakfin = [];
      for (var i in $scope.outbreak) {
        outbreakfin.push(new google.maps.LatLng($scope.outbreak[i][0], $scope.outbreak[i][1]));
      };
      var pointArray = new google.maps.MVCArray(outbreakfin);

      heatmap = map.heatmapLayers.foo;

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

      heatmap.setMap(map);
    });

};

I get the feeling that the heatmap layer is not loaded when is it supposed to.

What am I missing?

score 0 · Answer 1 · answered Feb 11 '18 at 22:33

You are getting the following error

invalid heatmap data

since pointArray array needs to be defined in scope of controller:

$scope.pointArray = [];

Secondly, there is no need to create the instance of HeatmapLayer:

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

since it is getting created within heatmapLayer directive and could be accessed from controller like this in your case:

heatmap = map.heatmapLayers.foo;

Modified example

angular.module('mapApp', ['ngMap'])
    .controller("MapCtrl", function ($scope, $http, NgMap) {

       
        $scope.pointArray = [];

        $scope.outbreak = [
            [21.088, 92.19862],
            [21.08866, 92.19874],
            [21.08869, 92.19872],
            [21.08865, 92.19875],
            [21.08765, 92.19865],
            [21.08752, 92.1981],
            [21.08853, 92.19803],
            [21.08883, 92.19724],
            [21.08896, 92.19658],
            [21.08888, 92.19656],
            [21.08718, 92.19678],
            [21.08965, 92.19624],
            [21.08977, 92.19625],
            [21.08958, 92.19656],
            [21.08999, 92.19677],
            [21.09024, 92.19709],
            [21.09059, 92.19672],
            [21.09092, 92.19645],
            [21.09088, 92.19643],
            [21.09083, 92.19574]
        ];

        $scope.renderHeatMap = function () {
            
            NgMap.getMap().then(function (map) {
                var outbreakfin = [];
                for (var i in $scope.outbreak) {
                    outbreakfin.push(new google.maps.LatLng($scope.outbreak[i][0], $scope.outbreak[i][1]));
                };
                $scope.pointArray = new google.maps.MVCArray(outbreakfin);

                heatmap = map.heatmapLayers.foo;
                heatmap.setData($scope.pointArray);
            });
        };



        $scope.renderHeatMap();


    });

<script src="https://maps.google.com/maps/api/js?libraries=visualization"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="mapApp" ng-controller="MapCtrl">
  
    <ng-map center="21.088513,92.197204" zoom="16" map-type-id="SATELLITE" >
        <heatmap-layer id="foo" data="pointArray"></heatmap-layer>
     </ng-map>
</div>

NgMap and Heatmap with async data

1 Answers1