Homepage map: add filters to display prestataire from specifif rubriques

templates/themes/kohinos/presta/block/carte.html.twig

@@ -5,3 +5,7 @@
 	<h4><i class="fa fa-map"></i> {{title}}</h4>
 </div>
 <div id="{{id}}" style="{{style}}" class='my-3'></div>
+<div>
+<button class="btn btn-primary" id="map-filter-food-shops">Commerces alimentaires</button>
+<button class="btn btn-primary" id="map-filter-markets">Marchés</button>
+</div>
\ No newline at end of file

templates/themes/kohinos/presta/block/cartejs.html.twig

 {% set idmap = id|default('mapid') %}
 {% set prestataires = getAllPrestataires() %}
 <script>
+	var mymap = null;
+	var mapFilters = [];
+
 	$(function () {
-	  $('[data-toggle="tooltip"]').tooltip()
-	  if ($('#{{idmap}}').length) {
-	  	var mymap = L.map('{{idmap}}').setView({{KOH_MAP_CENTER}}, {{KOH_MAP_ZOOM}});
+		$('[data-toggle="tooltip"]').tooltip();
 
+		function drawMap() {
+			if ($('#{{idmap}}').length) {
+				mymap = L.map('{{idmap}}').setView({{KOH_MAP_CENTER}}, {{KOH_MAP_ZOOM}});
 				L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {maxZoom: 18, attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(mymap);
 
-		{# AJOUTER LES MARQUEURS SUR LA CARTE #}
+				{# AJOUT DES MARQUEURS SUR LA CARTE #}
 				{% set count = 1 %}
 				{% for presta in prestataires %}
 					{% if presta.geolocs|length > 0 %}
 						{% for geolocp in presta.geolocs %}
 							{% if geolocp.enabled and geolocp.geoloc.lat != null and geolocp.geoloc.lon != null %}
+								var prestaRubriquesCount = parseInt('{{ presta.rubriques|length }}');
+								var prestaRubriqueSlug = prestaRubriquesCount > 0 ? '{{ presta.rubriques.first.slug  }}' : '';
+
+								if (
+									mapFilters.length === 0
+									|| mapFilters.length > 0
+									&& mapFilters.includes(prestaRubriqueSlug)
+								) {									
 									{% if presta.rubriques|length > 0 and presta.rubriques.first.media is not null %}
 										var iconClassName = 'kohinos-map-icon';
 										{% if date(presta.getCreatedAt()) > date('-2months') %}
@@ -45,10 +57,48 @@
 										{% endfor %}
 										{% endspaceless %}");
 									{% set count = count+1 %}
+								}
 							{% endif %}
 						{% endfor %}
 					{% endif %}
 				{% endfor %}
 			}
+		}
+
+		drawMap();
+
+		if ($('#map-filter-food-shops').length) {
+			$('#map-filter-food-shops').click(() => {
+				let index = mapFilters.indexOf('commerce-alimentaire');
+				if (index === -1) {
+					mapFilters.push('commerce-alimentaire');
+					$('#map-filter-food-shops').removeClass('btn-primary').addClass('btn-success');
+				} else {
+					mapFilters.splice(index, 1); 
+					$('#map-filter-food-shops').addClass('btn-primary').removeClass('btn-success');
+				}
+
+				// Redraw map
+				mymap.remove();
+				drawMap();
+			});
+		}
+
+		if ($('#map-filter-markets').length) {
+			$('#map-filter-markets').click(() => {
+				let index = mapFilters.indexOf('marches-amap');
+				if (index === -1) {
+					mapFilters.push('marches-amap');
+					$('#map-filter-markets').removeClass('btn-primary').addClass('btn-success');
+				} else {
+					mapFilters.splice(index, 1); 
+					$('#map-filter-markets').addClass('btn-primary').removeClass('btn-success');
+				}
+
+				// Redraw map
+				mymap.remove();
+				drawMap();
+			});
+		}
 	})
 </script>