Adds tag filter control for layers (marker, geojson features etc.) to LeafLet.
Switch branches/tags
Nothing to show
Clone or download
Mehmet Aydemir
Mehmet Aydemir changed display:inline-block to display:inline for the tags with spac…
…es problem. Thanks to @Attiq007 Attiq ur Rehman
Latest commit 709b043 Oct 9, 2018

README.md

Leaflet Tag Filter Button

Adds tag filter control for layers (marker, geojson features etc.) to LeafLet. Check out the demo

Usage

Required Leaflet.EasyButton

Simple usage :

If your markers contains tags option the plugin filters them by selected tags when popup is closed For example:


var map = L.map('map');

var fastMarker = L.marker([50.5, 30.5], { tags: ['fast'] }).addTo(map); 
var slowMarker = L.marker([50.5, 30.5], { tags: ['slow'] }).addTo(map);
var bothMarker = L.marker([50.5, 30.5], { tags: ['fast', 'slow'] }).addTo(map);

L.control.tagFilterButton({
	data: ['fast', 'slow']
}).addTo( map );

Set data from external url or ajax

note: this option not implemented yet!


var map = L.map('map');
L.tagFilterButton({
	ajaxData: function(callback) {
		$.get('https://leaflet-tag-filter-button.herokuapp.com/data', function(data)) {
			callback(data);
		}
	}
}).addTo( map );


Selection complete callback


var map = L.map('map');
L.tagFilterButton({
	data: function(callback) {
		$.get('https://leaflet-tag-filter-button.herokuapp.com/data', function(data)) {
			callback(data);
		}
	},
	onSelectionComplete: function(tags) {
		console.log('selected tags are', tags);
	}
}).addTo( map );


API Docs

Options

Option Type Default Description
icon String or HTML fa-filter The button icon. Default is fa-filter. You can use html syntax for the icon for example <img src="/filter.png">
onSelectionComplete Function null The callback function for selected tags. It fires when popup is closed and sends selected tags to the callback function as a parameter.
data Array or Function null The data to be used for tags popup, it can be array or function. If it's a function, the function must return tags array.
clearText String clear The text of the clear button
filterOnEveryClick Boolean false if set as true the plugin do filtering operation on every click event on the checkboxes.
openPopupOnHover Boolean false if set as true, the popup that contains tags will be open at mouse over time.

Methods

Method Returns Description
update() void Updates markers with last selected tags.
hasFiltered() Boolean returns true if any tag(s) selected otherwise false.
registerCustomSource(<Object> source) throws an exception ifsourcehas no name orsource.hidefunction is not implemented Registers source object for filtering markers by tags. If you want to to use this function you must implement hide function
enablePruneCluster(<PruneCluster> pruneClusterInstance) void Searches markers for filtering on given pruneClusterInstance object
resetCaches(<Boolean> update?) void Resets internal caches. if the update parameter sent as true, the update() function will be call after cleaning the cache.
addToReleated(<TagFilterButton> tagFilterButton) Boolean If it required to use multiple TagFilterButtons in the same map you must link two instance of TagFilterButtons by using this method. If linking is successful returns true otherwise returns false.

Change Log

Please check the Releases page

Authors

Thanks to Contributors