Greetings everyone! I am completely new to frontend development and have embarked on my first journey with AngularJS. I must admit, it's quite challenging and I'm still trying to wrap my head around how it all works. Currently, I'm working on a project that involves visualizing a set of coordinates on Google Maps. On the server-side, I've already set up the necessary API and everything is functioning smoothly.
For this project, I am utilizing ng-map and below you can find the initial version of my main.html code snippet:
<div class="screen-wrapper" id="map-wrapper">
<div map-lazy-load="https://maps.google.com/maps/api/js">
<ng-map center="37.782551, -122.445368" zoom="3" disable-default-u-i="true">
<heatmap-layer id="foo" data="dummyData"></heatmap>
</ng-map>
</div>
</div>
The dummyData mentioned above is a statically defined array in an external JS file which initially seemed unnecessary. However, when attempting to access the heatmapLayer from the map, I realized its importance. Without this attribute, I was unable to retrieve the heatmapLayer in my controller. It struck me as odd, but alas, I haven't figured out the reason behind this behavior.
My main.controller.js looks like this:
(function() {
'use strict';
angular
.module('webapp')
.controller('MainController', MainController);
/** @ngInject */
function MainController(NgMap, $scope, $http) {
var resp = $http.get('url.to.api')
.then(function(result) {
return result.data;
});
var incidentData = []
var extractor = Promise.resolve(resp).then(function(data) {
for (var i = 0; i < data.length; i++) {
var lat = data[i]["lat"];
var lon = data[i]["lon"];
incidentData.push(new google.maps.LatLng(lat,lon));
}
}).then(function() {
var incidentArray = new google.maps.MVCArray(incidentData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: incidentArray,
radius: 20
});
var heatmap;
$scope.$on('mapInitialized', function(event, map) {
heatMapLayer.setMap(map.instance);
});
});
}
})();
In the above code snippet, my aim is to make an HTTP request to fetch latitude and longitude values. Since they are returned in "Promise" format, I need to extract them and populate an array. Everything appears fine at first glance, but disappointingly, it just doesn't work. The interface only displays the 'hard-coded' visualization and not the newly added heatMapLayer.
If anyone would be kind enough to provide some guidance or suggest a solution to tackle the issue I'm facing, I would greatly appreciate it. Thank you, both to the community and StackOverflow.
update Following Daniel's advice, I made the following modification to my code.
In main.controller.js, I updated the code segment:
$scope.$on('mapInitialized', function(event, map) {
heatMapLayer.setMap(map.instance);
});
to:
$scope.$apply(function() {
$scope.$on('mapInitialized', function(event, map) {
heatMapLayer.setMap(map.instance);
});
});
Once again, thank you, Daniel!