0

I am builidng an angular app with a leaflet map. My goal is to create an object with all the markers of the map inside a controller. I want to retrieve the data for the markers from a google spreadsheet.

According to this site I think the marker object should look like this:

var marker = {
        bar1: {
            message: variable from spreadsheet,
            lat: variable from spreadsheet,
            lng: variable from spreadsheet
           },
        bar2: {
            message: variable from spreadsheet,
            lat: variable from spreadsheet,
            lng: variable from spreadsheet
        }
}

I am able to retrieve the data from the spreadsheet with this factory:

 angular.module('projekteApp')
  .factory('clientLoaderService', [
    '$q', '$http',
    function($q, $http) {
      var loadClientList = function() {
        console.log('loading..');
        var deferred = $q.defer();
        var sheet = 'od6';
        var key = '1ymI_YXjTl1qkOzCTHWTMlwI6T3kc4ix3hhdq9Cfw_Yo';
        var url = 'http://spreadsheets.google.com/feeds/list/' + key + '/' + sheet + '/public/values?alt=json-in-script';

        $http.jsonp(url + '&callback=JSON_CALLBACK')
          .success(function(data) {
            console.log('!!', data);
            var results = [];
            var feed = data.feed;
            var entries = feed.entry || [];
            for (var i = 0; i < entries.length; i++) {
              var value = entries[i];
              results.push(value);
            }
            deferred.resolve(results);
          })
          .error(function(reason) {
            deferred.reject(reason);
          });
        return deferred.promise;
      };
      return {
        loadClientList: loadClientList
      };
    }]);

Update: I could solve the problem. The working controller should look like this:

.controller('DisplayCtrl', ['$scope', 'clientLoaderService',
  function($scope, clientLoaderService) {

$scope.markers = [];

$scope.httpStatus = 0;
$scope.LoadRequest = clientLoaderService.loadClientList();
clientLoaderService.loadClientList()

.then(function (results) {
    console.log(results);
    for (var i = 0; i < results.length; i++){
        $scope.markers.push({
            lat: parseFloat(results[i].gsx$lat.$t),
            lng: parseFloat(results[i].gsx$long.$t)
        });
    }
    console.log($scope.markers);
]);

Marker for the map: Array of objects

Felix
  • 987
  • 1
  • 12
  • 23
  • What does the the result of your service call look like? The data structure that is. The "Marker" is an array of objects according to the docs you referenced – Justin Herter Jul 22 '16 at 21:36
  • I added a screenshot that shows the current array of objects. I think right now the problem is that the latitude and longitude use " ". How can I remove them? – Felix Jul 22 '16 at 21:51
  • Now it works, i only had to wrap it into parseFloat() function. – Felix Jul 22 '16 at 22:21

0 Answers0