leaflet-directive conflict with angular-google-maps

[codeagainstmachine]

My log error

angular.js:13920 
Error: [$compile:ctreq] http://errors.angularjs.org/1.5.8/$compile/ctreq?p0=leaflet&p1=center
    at Error (native)
    at http://localhost:8000/static/www/lib/angular/angular.min.js:6:412
    at ib (http://localhost:8000/static/www/lib/angular/angular.min.js:72:93)
    at p (http://localhost:8000/static/www/lib/angular/angular.min.js:66:380)
    at g (http://localhost:8000/static/www/lib/angular/angular.min.js:58:481)
    at g (http://localhost:8000/static/www/lib/angular/angular.min.js:58:498)
    at g (http://localhost:8000/static/www/lib/angular/angular.min.js:58:498)
    at g (http://localhost:8000/static/www/lib/angular/angular.min.js:58:498)
    at http://localhost:8000/static/www/lib/angular/angular.min.js:58:119
    at Object.<anonymous> (http://localhost:8000/static/www/lib/angular-ui-router/release/angular-ui-router.min.js:7:24081) <div ui-view="menuContent" class="ng-scope">

my app.js

angular.module('myApp', [
    'ngAnimate',
    'ui.router',
    'ngSanitize',
    'ui.bootstrap',
    'ngAside',
    'ui.slimscroll',
    'uiGmapgoogle-maps',
    'myApp.directives',
    'myApp.controllers', 
    'myApp.services',
    'myApp.constants',
    'myApp.factorys',
    'nemLogging',
    'leaflet-directive',
])
.run(['$http', function($http) {
    // $http.defaults.xsrfHeaderName = 'X-CSRFToken';
    // $http.defaults.xsrfCookieName = 'csrftoken';
}])
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
        $stateProvider
        .state('menu', {
            url: '/',
            cache: false,
            abstract: true,
            templateUrl: 'static/www/templates/menu.html'
        })
        .state('menu.google_page', {
            url: 'myapp/someurl/',
            views: {
                'menuContent': {
                  templateUrl: 'static/www/templates/main.html',
                  controller: 'Controller_for_angular_google_maps'
                }
            }
        })
        .state('menu.leaflet_page', {
            url: 'myapp/osm/',
            views: {
                'menuContent': {
                  templateUrl: 'static/www/templates/osm.html',
                  controller: 'Controller_for_leaflet-directive'
                }
            }
        })
    $locationProvider.hashPrefix('!');
    // $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');
        $state.go('menu.menu.google_page');
    });
}])
.config(['uiGmapGoogleMapApiProvider', function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'AIzaSyAlzh9YhYODl7bBqGeDfQSOXVOrqvLCQlM',
        v: '3.20',
        libraries: 'weather, geometry, visualization'
    });
}]);

my view for angular-google-map

<main id="content" class="content detalle-content" role="main">
            <div id="gmap" class="content-map">
                <ui-gmap-google-map
                    id="googleMap"
                    center="map.center"
                    zoom="map.zoom"
                    draggable="true"
                    options="options"
                    events="map.events">
                    <ui-gmap-marker
                        coords="marker.coords"
                        options="marker.options"
                        events="marker.events"
                        idkey="'marker.id'">
                    </ui-gmap-marker>
                    <ui-gmap-markers
                        models="buses"
                        coords="'coords'"
                        idkey="buses.id"
                        icon="'options.icon'"
                        click="infobus">
                    </ui-gmap-markers>
                    <ui-gmap-markers
                        models="buses"
                        coords="'coords'"
                        idkey="buses.id"
                        icon="'icon'"
                        click="infobus">
                    </ui-gmap-markers>
                    <ui-gmap-circle ng-repeat="c in circles track by c.id" 
                        center="c.center" 
                        stroke="c.stroke" 
                        fill="c.fill" 
                        radius="c.radius"
                        visible="c.visible" 
                        geodesic="c.geodesic" 
                        editable="c.editable" 
                        draggable="c.draggable" 
                        clickable="c.clickable" 
                        control="c.control">
                    </ui-gmap-circle>
                    <ui-gmap-polyline
                        ng-repeat="p in polylines"
                        path="p.path"
                        stroke="p.stroke"
                        visible='p.visible'
                        geodesic='p.geodesic'
                        fit="false"
                        editable="p.editable"
                        draggable="p.draggable"
                        icons='p.icons'>
                    </ui-gmap-polyline>
                </ui-gmap-google-map>
            </div>
    </main>

my view for angular-leaflet-directive

<leaflet 
    id="osmap2"
    tiles="tiles"
    markers="markers"
    layers="layers"
    lf-center="ubicacion"
    width="100%"
    height="480px">
</leaflet>

I noticed that leaflet-directive reads all "center" html attributes in different tags, including "ui-google-map", so modified my angular-leaflet-directive.js file, eliminating the "center" attribute from the $scope. That partially solved my problem since I will continue to have conflicts with the "bounds" attribute.

[elesdoar]

Both libraries are incompatible, please check ui-integration for google maps: http://angular-ui.github.io/ui-leaflet/examples/0000-viewer.html#/layers/googlemaps-example

@nmccready any comment?

[nmccready]

I haven't really looked at this, but my first reaction is why are you using both in the same app? As a workaround you might want a separate angular app on your page. One for angular-google-maps and one for ui-leaflet.

[patrickstorm]

I was able to solve this by removing center: '=', on about line 14 and removing 'center', from var centerDirectiveTypes = ['center', 'lfCenter'], on about line 3200.

This forces you to use lf-center instead of center though, so be aware. This also will be overwritten by each update, and has to be done with every install. You have been warned!

[kid-icarus]

Also encountering this error. I think the center directive here should be namespaced as lf-center. Center is a pretty ambiguous name.

[elesdoar]

This is not issue. both directives should not be in the same app. Closing this issue.

[kid-icarus]

Nice...