1

I am using angularjs with jqwidgets as a UI Framework and leaflet with angular-leaflet-directive. When I try to put a leaflet map into a jqDockingLayout / jqRibbon, the maptiles of leaflet are not shown properly (grey background instead of tile).

Here is a minimal Plunker i prepared: https://plnkr.co/edit/NrvXojEmKqA7PuIhDHTM

I tried to call map.invalidateSize(); after document ready and/or after creation of the jqxDockingLayout. I also tried to wrap leaflet in my own directive manually without success.

The intreresting thing is, that if i create a leaflet map manually via jQuery as described in the leafet quick-start within the jqxDockingLayout OR if i put the angular-leaflet-directive into a div outside of the jqxDockingLayout everything works fine.

Maybe related:

Thank your for your effort.

EDIT1: I found a workaround by compiling the map manually inside the controller which additionally injects $compile and $element. Then it looks like this:

demoApp.controller("demoController", [
...
$scope.settings = {
  width: 500,
  height: 500,
  layout: layout,
  created : function () {
    // Initialize Directives inside
    var x = angular.element( '<leaflet width="100%" height="100%"></leaflet>' );
    $element.find('#mapContainer').append( x );
    $compile( x )( $scope );
  }
};
...
]);

The interaction with the map works, but it is not the angular way since I am manipulating the DOM inside the controller and i think it is not the right place to init all of the inner directives. Moreover, directives like lf-center are not working anymore.

Community
  • 1
  • 1
Johannes H
  • 376
  • 2
  • 10
  • Played around with your Plunker, first off you forgot to set the `center` attribute on the directive. If you set it, it shows a bit of one tile. Second, the map won't respond to anything, it's dead. Adding click/drag events won't work, the zoomcontrols respond to hover but not to click which makes me suspect that your panel or tabs are interfering with the L.Map instance. I've looked around the docs for JQX tried some things but nothing works. Sorry to say that i'm clueless as it comes to JQX so i can't help you any further. Just thought i'de share my findings. Good luck! – iH8 Feb 04 '16 at 14:38
  • Thank you for sharing your findings. I edited the plunker accordingly (added a lf-center). – Johannes H Feb 04 '16 at 15:55

0 Answers0