tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

undefinedrootBroadcastName during directive initiation #1140

Open twoheadedmona opened 8 years ago

twoheadedmona commented 8 years ago

Hello

I am trying to integrate your directive, but I stumbled upon an issue:

LeafletEventsHelpersFactory: lObjectType: undefinedrootBroadcastName: undefinedangular.min.js:107:318
leafletDirectiveMap.movestartangular.min.js:107:318
leafletDirectiveMap.zoomstartangular.min.js:107:318
leafletDirectiveMap.viewresetangular.min.js:107:318
leafletDirectiveMap.loadangular.min.js:107:318
leafletDirectiveMap.layeraddangular.min.js:107:318
leafletDirectiveMap.moveangular.min.js:107:318
leafletDirectiveMap.zoomendangular.min.js:107:318
leafletDirectiveMap.moveendangular.min.js:107:318

Cause: the map is not showing up

angular.module('myapp')
    .controller("SimpleMapController", SimpleMapCtrl);

function SimpleMapCtrl($scope) {

    angular.extend($scope, {
        center: {
            lat: 40.095,
            lng: -3.823,
            zoom: 4
        },

        defaults: {
            scrollWheelZoom: false
        }
    });
}

Bower Libraries:
angularjs - 1.4.9 leaflet - 0.7.7 angular-leaflet-directive - 0.9.0

Ruben9922 commented 8 years ago

I seem to have a similar issue. Tried to get the directive working in a JHipster (Spring Boot + AngularJS) project, but no map is shown and the following is output in the console:

LeafletEventsHelpersFactory: lObjectType: undefinedrootBroadcastName: undefined

Bower dependencies:

"angular": "1.5.5",
"angular-leaflet-directive": "angular-leaflet#^0.10.0",
"leaflet": "leaflet-dist#^0.7.2"
abhee15 commented 8 years ago

That's just a warning. Try setting the width and height for the directive.

Ruben9922 commented 8 years ago

Oh ok, tried that and it works, thanks! 😃 Is the documentation incorrect then, as it says to just use <leaflet></leaflet> for a simple map?

(And for future reference, setting the width and height attributes on the directive worked; setting the width and height in CSS didn't work. It looks like the angular-leaflet-directive script uses these attributes and replaces the <leaflet> element with the actual map.)

rasor commented 7 years ago

height seems to be sufficient <leaflet style="height: 200px;"></leaflet>