Leaflet Tag Filter Button

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

• Usage
  • Set data from external url/ajax
  • Selection complete callback
• API Docs
  • Options
  • Methods
• Change Log
• Authors

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

Methods

Change Log

Please check the Releases page

Authors

Thanks to Contributors