Using filelayer plugin with angular directive

Question

I googled a lot and experimented a lot but i was not able to use the filelayer plugin inside my angular application. Even without the Angular directive using plain javascript in my html. I always got the error

 L.Control.fileLayerLoad

does not exist / is not a function...

It seems like the plugins script file cannot be combined with those from the angular directive... Has anyone succeeded with this or has a hint how this might work?

score 0 · Answer 1 · answered Apr 20 '16 at 07:49

It looks like the you have a typo when accessing the FileLayerLoad function, L.Control.fileLayerLoad should become L.Control.FileLayerLoad

the below example (although contrived) works

<!doctype html>
<html ng-app='app'>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" crossorigin="anonymous"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="http://rawgit.com/makinacorpus/Leaflet.FileLayer/gh-pages/leaflet.filelayer.js"></script>
  </head>
  <body>

    <div>
      <div ng-controller='Controller1'>
        <p>{{name}}</p>
      </div>
    </div>

  <script type="application/javascript">
    angular.module('app', [])
           .controller('Controller1', ['$scope', function($scope) {
             console.log('Controller 1')
             console.log(L.Control.FileLayerLoad);
             $scope.name = typeof L.Control.FileLayerLoad;
           }]);

  </script>

  </body>
</html>

Using filelayer plugin with angular directive

1 Answers1