angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
315 stars 137 forks source link

Custom Control #143

Open nmccready opened 8 years ago

nmccready commented 8 years ago

From @AleRob90 on February 20, 2015 12:47

Hello, I saw you made a pull about custom Control Button, but i can't make it work. I can't find any other example work. Neither issue 114 or pull 160 are working. angular.controller('myCtrl', ['$scope', 'leafletData', function($scope, leafletData){ var MyControl = L.control(); MyControl.setPosition('bottomleft'); MyControl.onAdd = function () { var className = 'leaflet-custom-control', container = L.DomUtil.create('div', className + ' leaflet-bar'); return container; } angular.extend($scope, $scope.directives); // My directives include controls.custom = [] leafletData.getMap().then(function(map){ map.controls.custom.push(MyControl); // tried even $scope.controls.custom.push(MyControl) that don't trow error, but didn't do anything }); })

I got an undefined error cause map.controls doesn't exist. I really appreciate an answer cause i don't want to put a random button that float on the map. Other documentation about this doesn't exist. I tried leaflet way and still not working.

Copied from original issue: tombatossals/angular-leaflet-directive#639

nmccready commented 8 years ago

From @AleRob90 on February 20, 2015 13:10

I managed to solve it:d This is my solution:

angular.controller('myCtrl', function(){ var ctrl = this; var MyControl = new L.control(); MyControl.setPosition('bottomleft'); MyControl.onAdd = function () { var className = 'leaflet-custom-control', container = L.DomUtil.create('div', className + ' leaflet-bar'); //angular.element(container).append(' ); to see it

// L.DomEvent.addListener(container, 'click', function(e){alert('My button first Click')}); // Search a lot for this click also. return container; } var directives = getMyDirectives(); //Get center controls markers layers etc... directives.controls.custom.push(MyControl); angular.extend(ctrl, directives); // My directives include controls.custom = [] })