Angular leaflet-directive with $routeProvider

Question

I want to use the leaflet plugin with angular JS. I found this directive https://github.com/tombatossals/angular-leaflet-directive following the official angular tutorial i created this code with a ngview and $routeProvider http://jsfiddle.net/dmpDu/6/ the map is displayed but the parameters in controller are not applied I have this warning in the debug console of chrome : "[AngularJS - Leaflet] 'center' is undefined in the current scope, did you forget to initialize it? "

if i don't use $routeProvider and declare my controller like this it's ok

app.controller("DemoController", [ "$scope", function($scope) {
           angular.extend($scope, {
               london: {
                   lat: 51.505,
                   lng: -0.09,
                   zoom: 4
               }
           });
       }]);

if i want to use routeprovider like this

app.config(function($routeProvider,  $locationProvider) {
    $routeProvider.
    when('/Home', {templateUrl: '/partials/HomeList.html', controller:  HomeListCtrl}).
    otherwise({redirectTo: '/Home'});
    $locationProvider.html5Mode(true);
});

and define the controller like that

function HomeListCtrl($rootScope,$scope,$routeParams, $location,$http) {
    activity_name = "home";
    console.log("test");

angular.extend($scope, {
               london: {
                   lat: 51.505,
                   lng: -0.09,
                   zoom: 4
               }
           });
}

the center is not defined :p and i have the error

[AngularJS - Leaflet] 'center' is undefined in the current scope, did you forget to initialize it?

can you give me some help ? thks

rakke rakke · Accepted Answer · 2013-12-02T21:01:28

In your leaflet declaration you have: center="center"

<leaflet defaults="defaults" center="center"  id="leaflet"></leaflet>

This is the center that the directive is missing. change it to center="london"

<leaflet defaults="defaults" center="london"  id="leaflet"></leaflet>

Angular leaflet-directive with $routeProvider

1 Answers