CODEWITHSUNDEEP
javascriptangularjshtmlleafletangular-leaflet-directive
solid_luffy
solid_luffy

Reputation: 371

Angular Token Error

I am getting this all of a sudden, and It doesn't let me use my leaflet map properly. Everytime I click on the map, a marker is added to the same coordinates. When I try to remove markers with a function, it empties the markers-array, however the markers are still visible on the map. What's going on?

    Error: [$parse:syntax] Syntax Error: Token '.0' is an unexpected token at column 8 of the expression [markers.0] starting at [.0].
http://errors.angularjs.org/1.4.8/$parse/syntax?p0=.0&p1=is%20an%20unexpected%20token&p2=8&p3=markers.0&p4=.0
    at angular.js:68
    at Object.AST.throwError (angular.js:13100)
    at Object.AST.ast (angular.js:12870)
    at Object.ASTCompiler.compile (angular.js:13319)
    at Parser.parse (angular.js:14189)
    at $parse (angular.js:14291)
    at Scope.$watch (angular.js:15482)
    at createMarker (angular-leaflet-directive.js:1016)
    at Object.fn (angular-leaflet-directive.js:795)
    at Scope.$digest (angular.js:15896)

Here's some code if it helps.

Controller.js:

$scope.location = {lat: 8.812354, lng: -11.887342};

            $scope.center = {
                lat: 8.812354,
                lng: -11.887342,
                zoom: 8
            };

            $scope.markers = [];
            $scope.markers.push({
                lat: 8.812354,
                lng: -11.667342,
                message: "hehe"
            });

    //This one is added to the array, but doesn't show up in the map
            $scope.markers.push({
                lat: 7.812354,
                lng: -10.667342,
                message: "WOOP"
            });

$scope.$on("leafletDirectiveMap.click", function (event, args) {

            var leafEvent = args.leafletEvent;
            console.log('Ctrl3 adding marker at lat=' + leafEvent.latlng.lat + ', lng=' + leafEvent.latlng.lng);
            $scope.location.lng = leafEvent.latlng.lng;
            $scope.location.lat = leafEvent.latlng.lat;

            $scope.markers.push({
                lat: leafEvent.latlng.lat,
                lng: leafEvent.latlng.lng,
                message: "My Added Marker"
            });
        });

HTML:

<leaflet class="col-md-offset-4 map" defaults="defaults" markers="markers" center="center" layers="layers"></leaflet>

Upvotes: 2

Views: 606

Answers (1)

NOtherDev
NOtherDev

Reputation: 9682

Note that $scope.markers is supposed to be an object, not an array. The directive is trying to enumerate the properties of the markers object and fails on the numeric properties that array has.

Change your $scope.markers to {} and add new markers to the object at some key instead of pushing it to the array, for example:

$scope.markers = {};

// ...

var idx = 0;
$scope.$on("leafletDirectiveMap.click", function (event, args) {
    idx += 1;

    $scope.markers['marker' + idx] = {
        // ...
    };
});

Upvotes: 1

Related Questions