# leaflet-tag-filter-button

> Adds tag filter control for marker to LeafLet

Latest version **0.0.5** (published 2020-12-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-tag-filter-button
pnpm add leaflet-tag-filter-button
yarn add leaflet-tag-filter-button
bun add leaflet-tag-filter-button
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-12-27 |
| First published | 2016-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 3.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 58 |
| Author | Mehmet Aydemir |
| Maintainers | maydemirx |
| Keywords | leaflet, plugin, button, tags, filter |

## Links

- npm: https://www.npmjs.com/package/leaflet-tag-filter-button
- Repository: https://github.com/maydemirx/leaflet-tag-filter-button
- Homepage: https://leaflet-tag-filter-button.herokuapp.com
- Issues: https://github.com/maydemirx/leaflet-tag-filter-button/issues
- npm.io page: https://npm.io/package/leaflet-tag-filter-button

## Dependencies (2)

- [leaflet](https://npm.io/package/leaflet.md) *
- [leaflet-easybutton](https://npm.io/package/leaflet-easybutton.md) *

## Recent versions

- 0.0.5 (latest) — 2020-12-27
- 0.0.4 — 2018-08-01
- 0.0.3 — 2016-08-18
- 0.0.2 — 2016-06-30
- 0.0.1 — 2016-03-03

## README

# Leaflet Tag Filter Button
Adds tag filter control for layers (marker, geojson features etc.) to LeafLet. Check out the [demo](http://maydemirx.github.io/leaflet-tag-filter-button/)

[![](https://data.jsdelivr.com/v1/package/npm/leaflet-tag-filter-button/badge)](https://www.jsdelivr.com/package/npm/leaflet-tag-filter-button)

- [Usage](#usage)
  * [Set data from external url/ajax](#set-data-from-external-url-or-ajax)
  * [Selection complete callback](#selection-complete-callback)
- [API Docs](#api-docs)
    + [Options](#options)
    + [Methods](#methods)
- [Change Log](#change-log)
- [Authors](#authors)

# Usage

Required [Leaflet.EasyButton](https://github.com/CliffCloud/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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)`> source`) | `throws an exception if `source` has no name or `source.hide` function 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`](https://github.com/SINTEF-9012/PruneCluster)`> pruneClusterInstance`) | `void`	| Searches markers for filtering on given `pruneClusterInstance` object
`resetCaches(<`[`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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`](https://github.com/maydemirx/leaflet-tag-filter-button)`> 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](https://github.com/maydemirx/leaflet-tag-filter-button/releases) page

# Authors

Thanks to [Contributors](https://github.com/maydemirx/leaflet-tag-filter-button/graphs/contributors)

---
_Source: https://npm.io/package/leaflet-tag-filter-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._