I am currently working on a project that involves creating a map-centric application using angularjs and esri arcgis.
My goal is to develop a separate service that includes a getMap method to return the map after it has been initialized, as well as an initMap method for initialization:
// within my controller:
MapService.initMap();
$scope.map = MapService.getMap();
This is what I have in my MapService.js:
angular.module('app')
.service('MapService', function($q, esriLoader) {
var deferred = $q.defer();
this.getMap = function(){
if ( angular.isDefined( deferred ) ) return $q.when( deferred );
}
var self = this;
this.initMap = function() {
esriLoader.require(['esri/Map'],
function(Map) {
console.log('require callback');
// Create the map
self.map = new Map({
basemap: 'satellite'
});
console.log('resolve map');
deferred.resolve(map);
});
}
});
However, I encounter an error on the line deferred.resolve(map) because deferred is undefined.
What could be causing this issue?