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.
Adds tag filter control for layers (marker, geojson features etc.) to LeafLet.
Please visit github repoThe 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.
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="../src/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 map = L.map('map').setView([36.86, 30.75], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWF5ZGVtaXJ4IiwiYSI6ImNpbGIweWdmMDAwM3h2cWx6a2QxaTc5YmMifQ.dpkSDE4DYKn6in5ODl_pWg', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
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>
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 of this example details please check the issue: using multiple tag filters in same map #10
You can use addToReleated()
function to link two tagFilterButton instance
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="../src/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="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 = '© <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>