Skip to content

K
kohinos-tav
Commit 05e11820 by Damien Moulard
Options

Homepage map: add filters to display prestataire from specifif rubriques

parent 0f72de5c
Showing with 103 additions and 49 deletions
templates/themes/kohinos/presta/block/carte.html.twig
...@@ -4,4 +4,8 @@ ...@@ -4,4 +4,8 @@
<div class='cartetitle mb-3'> <div class='cartetitle mb-3'>
<h4><i class="fa fa-map"></i> {{title}}</h4> <h4><i class="fa fa-map"></i> {{title}}</h4>
</div> </div>
<div id="{{id}}" style="{{style}}" class='my-3'></div> <div id="{{id}}" style="{{style}}" class='my-3'></div>
\ No newline at end of file <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 idmap = id|default('mapid') %}
{% set prestataires = getAllPrestataires() %} {% set prestataires = getAllPrestataires() %}
<script> <script>
var mymap = null;
var mapFilters = [];
$(function () { $(function () {
$('[data-toggle="tooltip"]').tooltip() $('[data-toggle="tooltip"]').tooltip();
if ($('#{{idmap}}').length) {
var mymap = L.map('{{idmap}}').setView({{KOH_MAP_CENTER}}, {{KOH_MAP_ZOOM}}); function drawMap() {
if ($('#{{idmap}}').length) {
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); 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 #}
{% set count = 1 %} {# AJOUT DES MARQUEURS SUR LA CARTE #}
{% for presta in prestataires %} {% set count = 1 %}
{% if presta.geolocs|length > 0 %} {% for presta in prestataires %}
{% for geolocp in presta.geolocs %} {% if presta.geolocs|length > 0 %}
{% if geolocp.enabled and geolocp.geoloc.lat != null and geolocp.geoloc.lon != null %} {% for geolocp in presta.geolocs %}
{% if presta.rubriques|length > 0 and presta.rubriques.first.media is not null %} {% if geolocp.enabled and geolocp.geoloc.lat != null and geolocp.geoloc.lon != null %}
var iconClassName = 'kohinos-map-icon'; var prestaRubriquesCount = parseInt('{{ presta.rubriques|length }}');
{% if date(presta.getCreatedAt()) > date('-2months') %} var prestaRubriqueSlug = prestaRubriquesCount > 0 ? '{{ presta.rubriques.first.slug }}' : '';
iconClassName = 'kohinos-map-icon new-presta-icon';
{% endif %} if (
var icon = L.icon({ mapFilters.length === 0
iconSize: [50, 50], || mapFilters.length > 0
iconAnchor: [25,50], && mapFilters.includes(prestaRubriqueSlug)
className: iconClassName, ) {
iconUrl : '{% path presta.rubriques.first.media, "preview" %}' {% if presta.rubriques|length > 0 and presta.rubriques.first.media is not null %}
}); var iconClassName = 'kohinos-map-icon';
var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}], {icon: icon}).addTo(mymap); {% if date(presta.getCreatedAt()) > date('-2months') %}
{% else %} iconClassName = 'kohinos-map-icon new-presta-icon';
var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}]).addTo(mymap); {% endif %}
{% endif %} var icon = L.icon({
marker_{{count}}.bindPopup("{% spaceless %}{% if presta.media != null %}{% set media %}{% thumbnail presta.media, 'small' %}{% endset %} {{ media|raw|replace({'"' : "'"})|raw }}<br/><br/>{% endif %} iconSize: [50, 50],
{% if date(presta.getCreatedAt()) > date('-2months') %} iconAnchor: [25,50],
<strong style='font-size:16px;'>[Nouveau] </strong> className: iconClassName,
iconUrl : '{% path presta.rubriques.first.media, "preview" %}'
});
var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}], {icon: icon}).addTo(mymap);
{% else %}
var marker_{{count}} = L.marker([{{geolocp.geoloc.lat}}, {{geolocp.geoloc.lon}}]).addTo(mymap);
{% endif %}
marker_{{count}}.bindPopup("{% spaceless %}{% if presta.media != null %}{% set media %}{% thumbnail presta.media, 'small' %}{% endset %} {{ media|raw|replace({'"' : "'"})|raw }}<br/><br/>{% endif %}
{% if date(presta.getCreatedAt()) > date('-2months') %}
<strong style='font-size:16px;'>[Nouveau] </strong>
{% endif %}
<a href='{{ path('show_prestataire', {'slug': presta.slug}) }}'>
<strong style='font-size:16px;'>{{presta.__toString()}}</strong>
</a>
<br/>
{% if presta.horaires is not null %}
<p>{{presta.horaires}}</p>
{% endif %}
{% for rubrique in presta.rubriques %}
<a class='maprubrique' href='{{ path('show_rubrique', {'slug': rubrique.slug}) }}'>{{rubrique.name|replace({"\n": '<br/>'})}}</a>{% if not loop.last %} - {% endif %}
{% endfor %}
{% endspaceless %}");
{% set count = count+1 %}
}
{% endif %} {% endif %}
<a href='{{ path('show_prestataire', {'slug': presta.slug}) }}'> {% endfor %}
<strong style='font-size:16px;'>{{presta.__toString()}}</strong> {% endif %}
</a> {% endfor %}
<br/> }
{% if presta.horaires is not null %} }
<p>{{presta.horaires}}</p>
{% endif %} drawMap();
{% for rubrique in presta.rubriques %}
<a class='maprubrique' href='{{ path('show_rubrique', {'slug': rubrique.slug}) }}'>{{rubrique.name|replace({"\n": '<br/>'})}}</a>{% if not loop.last %} - {% endif %} if ($('#map-filter-food-shops').length) {
{% endfor %} $('#map-filter-food-shops').click(() => {
{% endspaceless %}"); let index = mapFilters.indexOf('commerce-alimentaire');
{% set count = count+1 %} if (index === -1) {
{% endif %} mapFilters.push('commerce-alimentaire');
{% endfor %} $('#map-filter-food-shops').removeClass('btn-primary').addClass('btn-success');
{% endif %} } else {
{% endfor %} 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> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment