Angular Leaflet Search control event

Question

I have an AngularJS application and I'm currently trying to access the "search_expanded" event of Leaflet Search control but having no luck.

Here's my code:

angular.module('myApp', [ 'leaflet-directive' ])
       .controller('ShowMapCtrl', ["$scope", "leafletData", function ($scope, leafletData) {
       // some code
            leafletData.getMap().then(function(map) {
                       map.on('search_expanded', function(e){
                            alert("search control expannded"); 
                       });
                   });

`$rootScope.$on('search_expanded', console.log);` 2nd approach? — Minato, Feb 13 '16 at 10:04
`angular.element(document).on('search_expanded',console.log);` 3rd approach? — Minato, Feb 13 '16 at 10:07
yes. already tried `$(document).on("search_expanded", function(e){console.log("test")});` — noxfur, Feb 13 '16 at 10:39

score 1 · Accepted Answer · answered Feb 13 '16 at 12:25

1

The search_expanded event, and all the other events supported by L.Control.Search are fired on the actual control instance not on the map instance as you can see in the following example:

var controlSearch = new L.Control.Search({
    layer: new L.LayerGroup()
}).on('search_expanded', function () {
    console.log('search_expanded!')
}).addTo(map);

http://plnkr.co/edit/njeXYb4PfbaG3hppcgmO?p=preview

answered Feb 13 '16 at 12:25

iH8

27,722
4
67
76

yes but the `angular-leaflet-directive` has a different way of [implementing the search control](http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/controls/search-example) which disables from doing the traditional way of catching events – noxfur Feb 13 '16 at 13:03
I know and am sorry to say that afaik there is no way of grabbing the search control instance from `leafletControlHelpers` since the controls are not stored in a publicly available property. So the only solution you've got left is to grab the map instance in your controller and manually add the control to it. I know it sucks. Using this directive has serious drawbacks like it bloated and leaves out half the functionality you could be getting when running plain Leaflet with your own directive and putting all logic in your controller or a service. Good luck. – iH8 Feb 13 '16 at 14:17
I've also been searching through the helpers. No wonder I can't find anything I can use to get the event. I found a workaround though. It's kind of sloppy but it kind of works. – noxfur Feb 14 '16 at 06:18
@schizoskmrkxx care to share? – Stephan May 30 '16 at 14:24
@Stephan I've just undeleted my sloppy workaround. Please check my answer. But eventually I opted for iH8's answer. – noxfur May 31 '16 at 06:17

score 0 · Answer 2 · answered Feb 13 '16 at 08:46

First off I would try to throw some exception handling in there:

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        alert("search control expannded"); 
    }, function(reason) {
        alert('Failed: ' + reason);
});

Also, instead of alert, I prefer to use console.log() especially with Angular applications.

leafletData.getMap().then(function(map) {
    map.on('search_expanded', function(e){
        console.log("search control expannded"); 
    }, function(reason) {
        console.log('Failed: ' + reason);
});

Thanks but it's not the promise that has the problem. It successfully returns the promise every time. The problem is that I don't know how to catch the "search_expanded" event when fired. — noxfur, Feb 13 '16 at 08:54

noxfur · Answer 3 · 2016-02-14T06:23:38.103

0

I came up with a sloppy workaround since the directive won't allow me to catch the search control events.

var expanded = false;

$scope.$on('leafletDirectiveMap.layeradd', function(){

    $('input.search-input').focus(function(){

        expanded = !expanded;

        if(expanded)
        {
            console.log("search control expanded");
        }

    });
});

edited Feb 14 '16 at 06:23

answered Feb 14 '16 at 06:13

noxfur

331
1
5
15

Angular Leaflet Search control event

3 Answers3

Linked