maydemirx / leaflet-tag-filter-button Goto Github PK

Hello.
Congratulations for your job.
Exploring your plugin, I noticed that there is a small bug in choosing filters multiple.
In this case, I have two markers.

L.marker([-22.2018078, -42.7429318], {title: 'E-07/203676/2008', tags: ['Comercial','POSTO DE COMBUSTÍVEIS','Ativo','Fase Livre']}).addTo(markersLayer).bindPopup('Test');
L.marker([-22.7543032, -43.2858199], {title: 'E-07/202338/1999', tags: ['Industrial','Industria','Ativo','Não Detectado']}).addTo(markersLayer).bindPopup('Test');
L.control.tagFilterButton({
data: ['Comercial','Industrial','POSTO DE COMBUSTÍVEIS','Industria','Ativo','Desativado','Fase Livre','Não Detectado','Fase Livre e Produto no Solo','Fase Livre e Remediado']

If I choose the flitro "Ativo", the two markers are still on my screen, but when I choose a second filter that excludes one of the markers, the map continues with the two.
I'm not very good with JS, but I'm trying to see where I can move your code to help you.

Hugs

Hi there @maydemirx ,
Is there any way to have the filter-button filter on initialization? in other words, add the layer AND filter by (not by the user). For example 'fireFilterByTag' by fast such that:

myFilter = L.control.tagFilterButton({

	data: ['fast', 'slow'],
        fireFilterByTag: ['fast'], //something like this? 

}).addTo( map );

My Impression that this will do the trick, but it didnt:

	myFilter .filter(['fast']);
	myFilter .update();

Hi! I use this plugin and work fine. Is possible to include a search that I digit a value of the tag filter?

Hi,

I use your script here https://lepetitbleausard.fr it’s run very well. Many Thanks.

I'm looking for colored background of the tooltip for each tag <li> on the container like yellow, red, orange, .....

I try to change the css of the script line 448 with <style> li:nth-child(2) { color: #ccc; } </style> in my index.html page.

this._clearEl = L.DomUtil.create('ul', 'header', this._container);
this._clearEl.innerHTML = "<li class='ripple'>" + this.options.clearText + "";

I try to force change the css of the <li> and class='ripple' , but no effect.

Many thank for your answer if you have a suggestion.

Christian Ch.

Demo doesn't seem to be working.

Hi! I integrated your script in my map and I love it! :)
Some users told me that they cannot scroll down the tags menu, because the popup closes when they try to scroll it down. I tested myself on Chrome Android and I can confirm the behaviour.

HOW TO REPRODUCE THE BUG

1. open the map from Chrome in a mobile device (touch screen) or with the Chrome mobile dev tool (it works similarly)
2. when you try to scroll down the tags you cannot do it: the pop closes and you end up dragging the map instead of the menu

Hi,

I have implemented your plugin into my site ( https://spalt.plus/karte ) and as you can see I have many different filter tags inside my list - too many to display them without a scrollbar. However, scrolling in that list doesn't work for me, instead the map is zooming in and out. I can only scroll by dragging the scroll bar by hand.

The issue does not exist in Firefox.

Do you have any idea what I can do to fix this behavior?

Hello,

Thank you for this amazing plugin for leaflet. It's very interesting and helpful.
I have an issue and I don't know how to resolve it. The tag filtering is not working if I put the array in third position of the L.marker function. I would like to add custom icons but it doesn't work with the following code.

var icon_custom = L.icon({iconUrl: element.category_img, iconSize:[38, 45], iconAnchor:[0, 0],popupAnchor:[0, 0]}); var marker = L.marker([element.lat, element.lng],{icon:icon_custom},{ tags: [element.category_name]});

Could you help me with it ?

Hi! There's a way to set a default value filtered at the document ready? I would like that at the end of the page load the plugin filtered a marker with a default value that I decide

Hi there,

I would like to use Tag Filter Button, but I'm having a problem. I've added multiple filter buttons, but they are not working together.

Per example:
I want to filter projects in their status (active, ended), but I also want to filter on their topic (trees, plants, animals). So if I use a button to filter on the status 'active' and the topic 'plants', I would like to see only the instances that contain both tags. At the moment only one of two filter tags are used in the filtering, the last one clicked.

I understand that this use case might outside of the scope of the initial project, but I'd like to know if it'd be possible to implement something like this. If not, I'm gonna have to find another solution to my problem.

Currently the popup open on click but for user firendly popup should be open on mouse hover the filter button

Hi,

is it possible to implement a seperate (x) close button next to "clear" to close a filter div?

Thank you

It's currently not possible to use a keyboard to operate the filter tags.

Ideally <button> should be used and not <a>, please see the WAI-ARIA recommendation.

I am using this plugin which works very well. But the problem is when I specify "tags" in the L.marker method along with "icon" which is used for custom icon(images) only one of them works correctly.

==> var marker = L.marker(point, {tags: [shop.brand]}, {icon: seaGreenIcon}).addTo(map);

If I used it this way tags work perfectly but custom icon did not appear

==> var marker = L.marker(point, {icon: seaGreenIcon}, {tags: [shop.brand]}).addTo(map);

If I used that way custom icon appears but the plugin did not work Checkboxes do nothing as if they did not store tags

Please Suggest something to use both the functionality correctly together
Thanks

The CDN @ jsDelivr loading the 0.04 version has debugger statements inside which severely impedes the use. Probably left in by mistake..?

Relevant Section

        hide: function(accept) {
            if (this._container && (this._container.style.display == "none" || this._container.style.display == "")) {
                return;
            }
            debugger;
            if (this._container) {
                this._container.style.display = "none";
            }
            this.filter();
            this._easyButton.button.style.display = "block";
        },

Link to CDN

If the plugin using multiple times at one page and pruneCluster is enabled then always uses last pruneCluster instance. The filter functionality not working properly except last added plugin on the map.

Hi Mehmet,

I tried your leaflet-tag-filter-button. It works fine but can I to link the tags with the field's value of json?

Like in popup mode:

var popupContent = '

I'd like use this

(feature.properties['DATI']

for tag. 'DATI' is the field name il table of content linked json. 'DATI' is not null and can be two or more values.

I tried this:

but doesn't work.

Thanks
Valerio

Right now if I select TAG1 and TAG2 I get the sum of "all POI with TAG1" and "all POI with TAG2" (TAG1 OR TAG2) but would be very useful if the user could decide to see "only POI with both TAG1 and TAG2" (TAG1 AND TAG2)! ;)

EXAMPLE
I want to see only shops that are both zero waste AND bio.

Good day!

Thanks for the great plugin. I enjoy the ease of using it!

My question is how do I customize the look of the button control and the popup?

1. Is there a way to customize the button position to something other than topeft?
2. Is it possible to completely change the button markup?
3. Is it possible to completely change the popup markup?
4. Are there general recommendations how to approach this?

Thanks!

The filter button works on Chrome and Firefox, but does not show on Internet Explorer or Internet Edge.
Is it a button CSS/JS issue or a leaflet issue?

Can you provide an example of how to integrate the tag filter button with prune cluster?

Is it possible to open the menu by default, without having to click the icon?

Please remove "debugger;" from line 399! ;)

Hi, Mehmet.
I've been successfully using your script for a couple of years now (http://sea-entomologia.org/gia/map/index.html).
I'm trying to use the pre-filter feature but I find some problems.
I've got a web whose html is calling a js file in which all the stuff for the map is stored. The data and tags are stored in separare geojson and json files.
I can use
myfilter.filter(['SpeciesName']);
somehow within the js file, and it works.
Is it possible to execute such filtering from within the html instead of from the js?
I've got some 1500 species names, and it would be tough to create both html and js files for all of them.
Thanks a lot in advance.
Cheers

Hi.
First of all, thank you for this great filter script.
Secondly, I must confess I'm sort of a "glue-coder", since despite no initial skills on js I've been playing around and learning from you all to get a final mapping tool which is working pretty well.
Temporarily hosted here.
My question is related to the use of several filters and the possibility of using nested filtering.
My data are arranged in a geojson file, and the tags used in the filter buttons are in a different json file, displaying an array of tags for each filter.

These are my main filters:

 $.getJSON('https://URL_for_tags_File.json', function(data) {
var fam = L.control.tagFilterButton({
  data: data.fam,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-spider" style="font-size:150%;vertical-align: middle;color:red;"> Family</i>',
}).addTo(map);
fam.enableMCG(mcg);
var gen = L.control.tagFilterButton({
  data: data.gen,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-spider" style="font-size:150%;vertical-align: middle;color:#FF8000;"> Genus</i>',
}).addTo(map);
gen.enableMCG(mcg);
var spec = L.control.tagFilterButton({
  data: data.spec,
  filterOnEveryClick: true,
  icon: '<i class="fas fa-spider" style="font-size:150%;vertical-align: middle;color:#04B404;"> Species</i>',
}).addTo(map);
spec.enableMCG(mcg);
});

These are tags used in animal taxonomy. So, let's say that within each "family" there are several "genus", and within each "genus" there are several "species". A tree of species.
I wonder whether it would be possible that filtering one family would dinamically modify the list of available genera restricting them to those contained into that chosen family. And the same for species.
And I dont know whether that would work "backwards", I mean -instead of first choosing the "parent" family- what would happen if I first choose "child" genus?
Would its parent family appear as selected?

I'm sure all this would also mean rebuilding the json tags file, although I'm not sure which way of doing it I may choose. An array of species stating, within an object, which genus and family they belong to?
Thank you vey much in advance.
Regards.
G.

I use the Tag Filter Button and Marker Cluster plugins in my current map, but they do not work together. I would like the filter button to filter on the clusters generated by my map, like this. I opened the issue on stackoverflow and a person by the username ghybs discovered that the issue was that I had to call the registerCustomSource in the _prepareLayerSources and replace the default _map layer with a custom layer (specifically a MarkerClusterGroup or mcg).

Ghybs was able to look through the source code and write a new function called enableMCG that would accept a MarkerClusterGroup layer. I won't post the entire code here, because it's quite long, but here's the link to the stackoverflow question with ghybs's answer. They also discovered a small error in the code where an undefined var under registerCustomSource was giving some errors, found here:

// "Fix": add var
          for (var i = 0; i < this._invisibles.length; i++) {
            if (releatedLayers.indexOf(this._invisibles[i]) == -1) {
              // "Fix": add var
              for (var j = 0; j < this._invisibles[i].options.tags.length; j++) {
                if (
                  this._selectedTags.length == 0 ||
                  this._selectedTags.indexOf(
                    this._invisibles[i].options.tags[j]
                  ) !== -1
                ) {
                  this._map.addLayer(this._invisibles[i]);
                  toBeRemovedFromInvisibles.push(i);
                  break;
                }
              }
            }
          }

I was thinking this might be a good candidate for a pull request, but I wanted to run it through the issue page to see if there was another way of approaching this problem that was already implemented.

Thanks!

I would like to check one, the others do the uncheck, is it possible?

I am using tags with space in it. So the text after the space goes to the next line but in the same block.

How to fix it??

L.control.tagFilterButton({ data: ['tomato ketchup', 'cherry blossom', 'strawberry'], filterOnEveryClick: true, icon: '<i class="fa fa-pagelines"></i>', }).addTo( map );

I want the names (tag popUps) with spaces on the same line in my project i.e. 'Tomato Ketchup' And 'Cherry Blossom'.
Please guide me.

Thanks

this is also set to false by default. took me a while to find it to set it to true.

I was testing the demo but I think there are some issues with the default tileserver:

https://maydemirx.github.io/leaflet-tag-filter-button/

Maybe in the demo we can adopt the default OpenStreetMap. What do you think about?

Thank you so much for your work :) Very interesting plugin. I've found it from here:

https://leafletjs.com/plugins.html

The demo has a reference to the https flavour of the Leaflet 0.7.7 CDN files, which never worked. Either link to the http files, or copy the Leaflet library files into the heroku instance.

Hi,

There is no .d.ts file so it can't be used in an angular project.

Is there a way to generate it or use it without it?

I'm on it so i'll give my solution if I find it soon enough...

Edit: I didn't, just found an other way to do what I wanted to with an object with ID.

Hello, I've been running into 2 related issues with the tag filter button. The first issue is assigning tags to each of my points and the second is referencing a list of filter terms from an external JSON file through the data field.

For the first issue, this is the basic layout of my code for inserting points onto my leaflet map:

    var clusters = L.markerClusterGroup({maxClusterRadius:75});
    var getjson = $.getJSON("map-v2.geojson",function(data){
      var bev = L.geoJson(data,{
        pointToLayer: function(feature,latlng){
          var marker = L.marker(latlng, { tags: [feature.properties.Genres, feature.properties.Creator]});
          marker.bindPopup('<p align=center>' + '<strong>Title: </strong>' + feature.properties.Title + '<br/><a href="' + feature.properties.Image_Bank_URL + '" target="_blank"><img src="' + feature.properties.Thumbnail_URL + '"/></a><br/>' + '<strong>Date: </strong>' + feature.properties.Date + '<br/>' + '<strong>Creator: </strong>' + feature.properties.Creator, {minWidth : 250});
          return marker;
        }
      });
      clusters.addLayer(bev);
      map.addLayer(clusters);
    });

Essentially, where I assign var marker the value L.marker, I'm passing lat and long data being pulled from the geoJSON file, but I'm also trying to pass the genres and creator properties found in the geoJSON file as tags. From what I can tell, those data points are not being put as tags because when I copy and paste the exact tags into the L.control.tagFilterButton({ data: "" field, the markers all disappear. This is strange because it looks as though I've already set up the conditions to read from the geoJSON file via features.properties, but maybe I'm mistaken.

For the second issue, I've generated a local JSON file that has all the terms I want to use as filters for my data. I then try and get the JSON file to read the data and apply it to the data field in the L.control.tagFilterButton, just like so:

    var tags_json = $.getJSON("tags.json",function(data) {
      L.control.tagFilterButton({
        data: tags_json.genres,
        filterOnEveryClick: true,
        icon: '<i class="fas fa-tags"></i>',
      }).addTo(map);

I've tried everything from changing function(data) to function(json), assigning var tags_json as a separate variable, outside of function(data). I've even tried generating individual .txt files with just the terms to reference via jQuery, but that also does not work.

These issues might just be me failing to understand how JavaScript referencing works in this instance, in which case I apologize for cluttering the issues page with this and I'd be happy to take it down and post this in another forum. I have been searching online for any problem related to this and have found nothing. If someone is able to point me in the right direction, I'd be very grateful!

If anyone would like the html, geoJSON, and/or JSON files, I would be more than happy to share them.

And thank you for making this plugin! If I can resolve these issues, it will make my map all the more powerful and useful!