Angular-leaflet: How to add multiple geojson from ajax response

Question

I'm trying to dynamically add multiple GeoJSON data to my map. as shown below. However I don't see the data getting rendered.

$http.get("/kp-data").success(function(data, status){

                angular.forEach(data, function(k,v){
                        $scope.geojson[k.carId] = {data : k.data,
                                resetStyleOnMouseout: true,
                                style: {
                                    fillColor: k.color,
                                    weight: 2,
                                    opacity: 1,
                                    color: 'white',
                                    dashArray: '3',
                                    fillOpacity: 0.7
                                }
                        }
                });

In this example the geojson data USA and JPN is hardcoded. I modified the code for dynamic addition. The code works if I modified as below for a single geojson data

   $http.get("/kp-data").success(function(data, status){

            angular.forEach(data, function(k,v){
                    if(v==1){
                    $scope.geojson = {data : k.data,
                            resetStyleOnMouseout: true,
                            style: {
                                fillColor: k.color,
                                weight: 2,
                                opacity: 1,
                                color: 'white',
                                dashArray: '3',
                                fillOpacity: 0.7
                            }
                    }
                 }
            });

score 0 · Answer 1 · answered Feb 27 '17 at 17:32

0

Do you have some error message ?

And you should declear $scope.geojson as an object before you call angular.forEach function.

like this .

answered Feb 27 '17 at 17:32

stackoverYC

490
2
4
13

yes I've declared the variable, else the second case would not have worked – Karthik Prasad Feb 28 '17 at 06:49

TVT. Jake · Answer 2 · 2017-03-10T01:52:37.313

0

After declare $scope.jeojson = [], length of this is 0, so in loop $scope.jeojson[index] is undefined (index # 0). I think you should try something as: $scope.jeojson.push(json)...

And, i recommend you to use "for" rather than "angular.forEach". Hope it good for you!

edited Mar 10 '17 at 01:52

answered Mar 10 '17 at 01:38

TVT. Jake

279
2
7

Angular-leaflet: How to add multiple geojson from ajax response

2 Answers2