CODEWITHSUNDEEP
leafletangular-leaflet-directive
Ropstah
Ropstah

Reputation: 17794

Unable to add marker to Angular Leaflet directive

I'm trying to add a marker to the Leaflet directive but somehow it doesn't accept markers created with the default L.marker() method.

The directive is used as follows:

<leaflet markers="markers" center="center" layers="layers" defaults="defaults"></leaflet>

I'm extending my $scope in the controller as prescribed:

angular.extend($scope, {
    markers: {},
    //markers: { { someName: {lat:52.163815,lng:5.365131} } //this does work
});

Adding a marker afterwards doesn't work somehow. First the .markers object is not an array, so I can't just add any elements using push(). But even adding an element as associative array doesn't work:

var marker = L.marker(L.latLng(52.163815, 5.365131));
$scope.markers[0] = marker;

The error is:

[AngularJS - Leaflet] The marker definition is not valid.

[AngularJS - Leaflet] Received invalid data on the marker 0.

I'm overlooking something very simple but I've got no idea what... Any lead would be greatly appreciated.

Upvotes: 2

Views: 1452

Answers (1)

NOtherDev
NOtherDev

Reputation: 9672

$scope.markers is expecting to get an object with marker properties, not the marker itself. What would work in your example is just a LatLng object, before wrapping it as Marker.

$scope.markers[0] = L.latLng(52.163815, 5.365131);

Or, if you get Markers from the outside, you can get it back from the inside:

$scope.markers[0] = marker.getLatLng();

Obviously, that doesn't convey another markers' properties, just coordinates.

Upvotes: 2

Related Questions