Error with angular and leaflet libraries

Question

When I use leaflet map with angular-leaflet-directive and try to add draw controls, this causes an error.

The Controller:

    SomeApp.controller("mainMapController", function ($scope){
        angular.extend($scope, {
            defaults: {
                tileLayer: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
            },
            controls: {
                draw: {}
            }
    })
    leafletData.getMap().then(function(map) {
        var drawnItems = $scope.controls.edit.featureGroup;
        })
    });

HTML code:

<div ng-controller="mainMapController">
    <leaflet></leaflet>
</div>

Angular gives this error:

Error: ng:areq Bad Argument

Argument mainMapController is not.

Can you give me some help?

Thanks

score 0 · Answer 1 · answered May 25 '15 at 01:15

I guess you have to include the leafletData in your controller as follows:

Your MainMapController.js:

SomeApp.controller("mainMapController", ['$scope', 'leafletData', function ($scope, leafletData){
        angular.extend($scope, {
            defaults: {
                tileLayer: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
            },
            controls: {
                draw: {}
            }
    })
    leafletData.getMap().then(function(map) {
        var drawnItems = $scope.controls.edit.featureGroup;
        })
        map.on('draw:created', function (e) {
        var layer = e.layer;
        drawnItems.addLayer(layer);
        console.log(JSON.stringify(layer.toGeoJSON()));
      });
    }]);

HTML:

<div ng-controller="mainMapController">
    <leaflet defaults="defaults" controls="controls" width="100%" height="480px"></leaflet>
</div>

For more info: https://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/controls/draw-example

Error with angular and leaflet libraries

1 Answers1