Tag Filter Button Demo

Download

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

Please visit github repo

Simple Usage

Example

Note

The ripple effect is not part of this project. If you want to use it you must add mladenplavsic ripple effect to your project. The tag-filter-button is using ripple css class for checkboxes as default.

Code

Attention:

You need to download all js and css file like leaflet.js or easybutton.js from docs folder in my repo



<!DOCTYPE html>
<html>
<head>
<title>
	Leaflet Tag Filter Button Example
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-easy-button.css" />
<link rel="stylesheet" href="leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="ripple.min.css" />
<script src="leaflet.js"></script>
<script src="leaflet-easy-button.js"></script>
<script src="leaflet-tag-filter-button.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px"></div>
<script type="text/javascript">

$(function(argument) {
    	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            maxZoom: 18,
            attribution: osmAttrib
        });
	var map = L.map('map').setView([36.86, 30.75], 12).addLayer(osm);

	var fastMarker = L.marker([36.8963965256, 30.7087719440], { tags: ['fast'] }).addTo(map).bindPopup('fast'); 
	var slowMarker = L.marker([36.8967740487, 30.7107782364], { tags: ['slow'] }).addTo(map).bindPopup('slow');
	var bothMarker = L.marker([36.8881768737, 30.7024331594], { tags: ['fast', 'slow'] }).addTo(map).bindPopup('fast & slow');

	//

	L.control.tagFilterButton({
        data: ['fast', 'slow', 'none'],
        icon: '<img src="filter.png">',
        filterOnEveryClick: true
    }).addTo( map );
});

</script>
</body>

Releated Buttons Usage

Example

Note

The ripple effect is not part of this project. If you want to use it you must add mladenplavsic ripple effect to your project. The tag-filter-button is using ripple css class for checkboxes as default.

For further details of this example please check the issue: using multiple tag filters in same map #10

You can use addToReleated() function to link two tagFilterButton instance

Code

Attention:

You need to download all js and css file like leaflet.js or easybutton.js from docs folder in my repo



<!DOCTYPE html>
<html>
<head>
<title>
	Leaflet Tag Filter Button Example
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-easy-button.css" />
<link rel="stylesheet" href="leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="ripple.min.css" />
<script src="leaflet.js"></script>
<script src="leaflet-easy-button.js"></script>
<script src="leaflet-tag-filter-button.js"></script>
<style>
.leaflet-map {
  height: 500px;
  width: 100%;
}

.easy-button-button {
  display: block !important;
}

.tag-filter-tags-container {
  left: 30px;
}
</style>
</head>
<body>
<div id="releated-usage-map" style="width: 100%; height: 400px"></div>
<script type="text/javascript">

$(function(argument) {
	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            maxZoom: 18,
            attribution: osmAttrib
        });

    // initialize the map on the "map" div with a given center and zoom
    var releatedUsageMap = L.map('releated-usage-map').setView([50.5, 30.5], 12).addLayer(osm);

    L.marker([50.521, 30.52], { tags: ['tomato', 'active'] }).bindPopup('tomato, active').addTo(releatedUsageMap); 
    L.marker([50.487, 30.54], { tags: ['tomato', 'ended'] }).bindPopup('tomato, ended').addTo(releatedUsageMap);
    L.marker([50.533, 30.5], { tags: ['tomato', 'ended'] }).bindPopup('tomato, ended').addTo(releatedUsageMap);
    L.marker([50.54, 30.48], { tags: ['strawberry', 'active'] }).bindPopup('strawberry, active').addTo(releatedUsageMap);
    L.marker([50.505, 30.46], { tags: ['strawberry', 'ended'] }).bindPopup('strawberry, ended').addTo(releatedUsageMap);
    L.marker([50.5, 30.43], { tags: ['cherry', 'active'] }).bindPopup('cherry, active').addTo(releatedUsageMap);
    L.marker([50.48, 30.5], { tags: ['cherry', 'ended'] }).bindPopup('cherry, ended').addTo(releatedUsageMap);

     var statusFilterButton = L.control.tagFilterButton({
        data: ['active', 'ended'],
      filterOnEveryClick: true,
      icon: '<i class="fa fa-suitcase"></i>',
    }).addTo( releatedUsageMap );

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

    foodFilterButton.addToReleated(statusFilterButton);

    jQuery('.easy-button-button').click(function() {
        target = jQuery('.easy-button-button').not(this);
        target.parent().find('.tag-filter-tags-container').css({
            'display' : 'none',
        });
    });
});

</script>
</body>