[AngularJS - Leaflet] Invalid data passed to the polyline path

[nmccready]

From @cleechtech on March 12, 2014 12:31

I'm trying to draw a path when a user clicks a certain element. In my view I have the directive:

<leaflet 
        center="nairobi" 
        paths="paths" 
        markers="markers" 
        defaults="defaults" 
        height="600">
    </leaflet>

Then in my controller I fetch the data points and add them to $scope.paths

   // function to draw path on map
    $scope.drawRoute = function(shape_id){
        // get path coordinates
        Route.getCoords(shape_id, function(points){
            var newPath = {
                color:'red',
                weight: 4,
                latlngs: []
            };

            // create array of latlngs
            angular.forEach(points, function(point){
                 // each point looks like this: ["1001", "-1.320547", "36.70583"]
                var coord = {
                    lat: point[1],
                    lng: point[2]
                };
                newPath.latlngs.push(coord);
            });
            var pathName = shape_id;

            // add path to $scope
            $scope.paths[pathName] = newPath;

        }, function(error){
            $scope.routeToDraw  = error;
        });
    };

    // generate map
    angular.extend($scope, {
        nairobi: {
            lat: -1.284381, 
            lng: 36.809031,
            zoom: 12
        },
        paths: {
            defaultPath: {
                color: 'red',
                weight: 4,
                latlngs: [
                        { lat: -1.284381, lng: 36.700974 },
                        { lat: -1.31349, lng: 36.699959 },
                        { lat: -1.311739, lng: 36.698589 }
                ],
            }
        },
        markers: {},
        defaults: {
            scrollWheelZoom: false
        }
    });

The defaultPath shows up fine when the page loads, but when I click an element I get an error:

[AngularJS - Leaflet] Invalid data passed to the polyline path angular.js:9383
TypeError: Cannot call method 'on' of undefined

How can I draw a path when a user clicks an element?

Copied from original issue: tombatossals/angular-leaflet-directive#323

[nmccready]

From @tombatossals on March 19, 2014 10:31

Hi, please, could you implement the case in a working demo?

You could use this jsfiddle as a start: http://jsfiddle.net/tombatossals/4PhzC/

Thanks for reporting