http://widerstand-in-mv.de/assets/tag-filter/leaflet-tag-filter-button.js

1(function() {
2
3    L.Control.TagFilterButton = L.Control.extend({
4
5        options: {
6            icon: "fa-filter", //buton icon default is fa-filter
7            onSelectionComplete: null, // the callback function for selected tags
8            data: null, // the data to be used for tags popup, it can be array or function
9            clearText: 'clear', // the text of the clear button
10
11            ajaxData: null // it can be used for remote data TODO: implement it!
12        },
13
14        _map: null,
15        _container: null,
16        _easyButton: null,
17        _tagEl: null,
18        _selectedTags: [],
19        _invisibles: [],
20
21        _preparePopup: function(data) {
22            for (var i = 0; i < data.length; i++) {
23                var div = L.DomUtil.create('div', '', this._container);
24                var label = L.DomUtil.create('label', '', div);
25                var text = data[i].name;
26                var value = data[i].name;
27                /*
28                if (typeof text == 'object' && Object.keys(data[i]) == 2) { // key,value
29                    text = data[i].name;
30                    value = data[i].value;
31                }
32                */
33                var checked = this._selectedTags.indexOf(value) !== -1;
34                if (data[i].subtitle == '1') {
35                    label.innerHTML = '<h4 class="filter_subtitle">' + text + '</h4>';                    
36                } else {
37                    label.innerHTML = '<input type="checkbox" ' + (checked ? 'checked="true"' : '') + 'data-value="' + value + '" class="regular-checkbox"/><label></label> ' + text;
38                }
39                label.style.width = '100%';
40
41                L.DomEvent.addListener(label, 'dblclick', L.DomEvent.stop);
42                L.DomEvent.addListener(label, 'click', function(e) {
43                    L.DomEvent.stop(e);
44                    var checkbox = this.getElementsByTagName("input")[0];
45                    var checkboxes = $(this).parents('.tag-filter-tags-container').find("input");
46                    checkbox.checked = !checkbox.checked;
47                    
48                    var filterResult = false;

49                    // Prüfen, ob überhaupt eine Checkbox gecheckt ist
50                    $(checkboxes).each(function() {
51                        if ($(this).prop('checked')) {
52                            filterResult = true;
53                        }                        
54                    });                    
55                    
56                    // alle aus ...
57                    
58                    
59                    
60                    $.each(map._layers, function (ml) {
61                        if (map._layers[ml].feature) {
62//                            this._icon.style.display = 'none';
63                            if (filterResult) {
64                                $(this._icon).addClass('leaflet-hide');
65                            } else {
66                                $(this._icon).removeClass('leaflet-hide');
67                            }
68                        }
69                    });
70                    
71                    
72                    if (filterResult) {
73                        var markers = [];
74                        // für alle Checkboxes die einschalten, die den Filterkriterien entsprechen
75                        $(checkboxes).each(function() {
76                            searchtag = $(this).data('value');
77
78                            if ($(this).prop('checked')) {
79                                $.each(map._layers, function (ml) {
80                                    if (map._layers[ml].feature) {
81                                        marker = this;
82                                        tags = marker.feature.tags;
83                                        if ($.inArray(searchtag, tags) > -1) {
84    //                                        marker._icon.style.display = 'block';
85                                            $(this._icon).removeClass('leaflet-hide');
86                                        }
87                                    }
88                                });
89                            }
90                        });
91                        
92                    }
93                    
94                    syncSidebar();
95                    
96                });
97            }
98            this._container.style.display = "block";
99        },
100
101        _clearSelections: function(e) {
102            L.DomEvent.stop(e);
103            this._selectedTags = [];
104            var checkboxContainer = (this._container.getElementsByTagName('div')[0]),
105                childCount = this._container.childElementCount,
106                children = this._container.children,
107                childCheckbox, i;
108
109            this._selectedTags = [];
110
111            for (i = 0; i < childCount; i++) {
112                childCheckbox = children[i].getElementsByTagName('input')[0];
113                if (childCheckbox && childCheckbox.checked) {
114                    childCheckbox.checked = false;
115                }
116            }
117        },
118
119        _showTagFilterPopup: function() {
120
121            this._easyButton.button.style.display = "none";
122
123            if (!this._container) {
124                throw 'container is not initialized!';
125            }
126
127            if (!this.options.data && !this.options.ajaxData) {
128                throw 'data is empty!';
129            }
130
131            this._container.innerHTML = '<a href="#">' + this.options.clearText + '</a>';
132            var clearButton = this._container.getElementsByTagName('a')[0];
133            L.DomEvent.addListener(this._container, 'click', this._clearSelections.bind(this));
134
135            if (this.options.data) {
136                if (typeof this.options.data === 'function') {
137                    this._preparePopup(this.options.data());
138                } else {
139                    this._preparePopup(this.options.data);
140                }
141            }
142
143        },
144
145        hide: function(accept) {
146            
147            if (this._container.style.display == "none") {
148                return;
149            }
150
151            if (this._container) {
152                this._container.style.display = "none";
153            }
154
155            var checkboxContainer = (this._container.getElementsByTagName('div')[0]),
156                childCount = this._container.childElementCount,
157                children = this._container.children,
158                childCheckbox, i, j;
159
160            this._selectedTags = [];
161
162            for (i = 0; i < childCount; i++) {
163                childCheckbox = children[i].getElementsByTagName('input')[0];
164                if (childCheckbox && childCheckbox.checked) {
165                    this._selectedTags.push(childCheckbox.getAttribute('data-value'));
166                }
167            }
168
169            var toBeRemovedFromInvisibles = [];
170
171            for (i = 0; i < this._invisibles.length; i++) {
172                for (j = 0; j < this._invisibles[i].options.tags.length; j++) {
173                    if (this._selectedTags.length == 0 || this._selectedTags.indexOf(this._invisibles[i].options.tags[j]) !== -1) {
174                        this._map.addLayer(this._invisibles[i]);
175                        toBeRemovedFromInvisibles.push(i);
176                        break;
177                    }
178                }
179            }
180
181            while(toBeRemovedFromInvisibles.length > 0) {
182                this._invisibles.splice(toBeRemovedFromInvisibles.pop(), 1);
183            }
184
185            var removedMarkers = [];
186
187            if (this._selectedTags.length > 0) {
188                this._map.eachLayer(function(layer) {
189                    if (layer && layer.options && layer.options.tags) {
190                        var found = false;

191                        for (var i = 0; i < layer.options.tags.length; i++) {
192                            found = this._selectedTags.indexOf(layer.options.tags[i]) !== -1;
193                            if (found) {
194                                break;
195                            }
196                        }
197                        if (!found) {
198                            removedMarkers.push(layer);
199                        }
200                    }
201                }.bind(this));
202
203                for (i = 0; i < removedMarkers.length; i++) {
204                    this._map.removeLayer(removedMarkers[i]);
205                    this._invisibles.push(removedMarkers[i]);
206                }
207            }
208
209            if (this.options.onSelectionComplete && typeof this.options.onSelectionComplete == 'function') {
210                this.options.onSelectionComplete.call(this, this._selectedTags);
211            }
212
213            this._easyButton.button.style.display = "block";
214        },
215
216        initialize: function(options) {
217            L.Util.setOptions(this, options || {});
218        },
219
220        addTo: function(map) {
221            this._map = map;
222            this._easyButton = L.easyButton(this.options.icon, this._showTagFilterPopup.bind(this)).addTo(map);
223            this._container = L.DomUtil.create('div', 'tag-filter-tags-container', this._easyButton._container);
224            this._tagEl = L.DomUtil.create('ul', '', this._container);
225            this._map.on('dragstart click', this.hide, this);
226            L.DomEvent.addListener(this._container, 'dblclick', L.DomEvent.stop);
227            L.DomEvent.addListener(this._container, 'click', L.DomEvent.stop);
228            return this;
229        },
230
231        onRemove: function(map) {
232            this._container.parentNode.removeChild(this._container);
233            return this;
234        }
235
236    });
237
238    L.control.tagFilterButton = function(options) {
239        return new L.Control.TagFilterButton(options);
240    };
241
242}).call(this);