Heatmap data from $scope

[bosencoding]

Hi Allen, I want to make the origin of the data heatmap $scope.map in the controller. But I get the message: "invalid heatmap data <heatmap-layer data="{{location}}" <="" heatmap="">" . This is the controller that I made:

.controller('mapCtrl', function($scope,$http,NgMap) {
        $http.get('sample.json')
            .then(function(dataMaps) {
                    $scope.mapping = dataMaps.data.details;
                    $scope.location = [];
                    $scope.mapping.forEach(function (eachMap) {
                        $scope.location.push(eachMap.longlat);
                        console.log($scope.location);
                    });
                });
        } );

Then i put that $scope.location into:

<ng-map zoom="4" center="nLong, nLat" map-type-id="SATELLITE">
 <heatmap-layer  data="{{location}}"</heatmap>
 </ng-map>

How to put the $scope data from my controller?

Thank you Allen

[allenhwkim]

Thanks for using this module As you see in here, HeatMapLayer does have setData method, https://developers.google.com/maps/documentation/javascript/3.exp/reference#HeatmapLayer

However, as you see in here, our directive heatmap-layer does not have observer running for heatmap. https://github.com/allenhwkim/angularjs-google-maps/blob/master/directives/heatmap-layer.js

Like marker directive, we can set observer for this heatmap-layer

    //set observers
    mapController.observeAttrSetObj(orgAttrs, attrs, marker); /* observers */

[allenhwkim]

no luck yet with observer. will try setData directly later

[bosencoding]

Thanks for your answers, Allen. I hope next version supporting with observer. Regards

[trainerbill]

I think the main issue is in the design of the directives. Since it is parsing any attribute for use with google maps, it prevents us from doing 2 way binding on the attributes. The heatmap data and map data need to be able to accept a promise as well. I was trying to get it to work but since you can't 2 way bind the attrs I don't know if it will be possible. So I just do the heatmap stuff directly using the google api. @allenhwkim What would you say to having google- added to the attributes that are parsed for google? Then any other attributes are 2 way binded? Its a big change but needed. It would open up a lot of different possibilites. Can we open up a discussion Issue for v2.0 that will introduce breaking changes? I am willing to do a lot of the work if you open up a 2.0 branch and start a discussion.

[allenhwkim]

@trainerbill It's a very big change to do that. I don't even think about real two-way binding now. All those observers that I set are one-way binding. We also think about performance.

I can create a branch for you and assign you as a contributor, and you can start working on a branch.

We are also thinking about it to upgrade to Angular2.0. However, it's not high priority yet.

[trainerbill]

@allenhwkim Yeah I know its a big change, but in the end I think it will make a better product. Can you open a discussion issue for v2.0 and a branch?

[trainerbill]

@hany-andriyanto https://github.com/allenhwkim/angularjs-google-maps/issues/468

[allenhwkim]

Thanks, I will take a look later when I get better

[ruisilva450]

So? Any news on this?

[allenhwkim]

This seems like a google maps design issue. Heatmap is not an overlay of a map. It's drawn on a layer. Thus, if you need to change heatmap, you need to redraw the map. By simply changing heatmap data does not redraw it.

There are more from stackoverflow. Heatmap is different than others http://stackoverflow.com/questions/24397957/dynamically-update-a-google-heatmap-layer http://stackoverflow.com/questions/13479514/updating-heatmap-data-simple-google-heatmap http://stackoverflow.com/questions/13434117/updating-heat-map-with-real-time-data

Thus, if you want to update Heatmap, it's better to do raw coding than using directive with an url.

[d7my11]

I used google maps api to fix it, something like this:

const heatmap = new google.maps.visualization.HeatmapLayer({
  data,
  map
});

[icoffe01]

Hi @allenhwkim , first thanks for your support, i faced the same error

invalid heatmap data <heatmap-layer id="leadsHeatMap">

i try by more than way : 1- by setData heatmap.setData(leadsLocationVM.myLocalData); 2- from view attribute

<div class="opp-main-container"
     map-lazy-load="https://maps.google.com/maps/api/js?key=********&libraries=visualization"
     map-lazy-load-params="{{leadsLocationVM.googleMapsUrl}}">
    <ng-map zoom="5.58"  map-type-id="roadmap" default-style="false"
            pan-control="true" map-type-control="false" zoom-control="true"
            zoom-control-options="{style:'SMALL'}" class="map-container">
        <heatmap-layer id="leadsHeatMap" data="{{myLocalData}}"></heatmap-layer>
    </ng-map>
</div>

my array structure like this:

leadsLocationVM.myLocalData = [ new google.maps.LatLng({lat:21.5134656074464, lng:39.1813917267032}), new google.maps.LatLng({lat:21.6030482, lng:39.1440692}) ]

also i try with :

leadsLocationVM.myLocalData = [ new google.maps.LatLng(21.5134656074464,39.1813917267032), new google.maps.LatLng(21.6030482, 39.1440692) ]

thanks in advance

[icoffe01]

any help :(

[kannan007]

@icoffe01 Did you figure it out? Am facing the same problem now.

[icoffe01]

@kannan007 Hi, I used the different way, as mentioned in GMap documents as pure js. it's work fine with me : see http://jsfiddle.net/MagicDice/2p145rq1/

in this tutoiral he used MVCArray(), I didn't use it.