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 @@
<div class='cartetitle mb-3'>
<h4><i class="fa fa-map"></i> {{title}}</h4>
</div>
<div id="{{id}}" style="{{style}}" class='my-3'></div>
\ No newline at end of file
<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}});
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 %}
{% 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 %}
{% if presta.rubriques|length > 0 and presta.rubriques.first.media is not null %}
var iconClassName = 'kohinos-map-icon';
{% if date(presta.getCreatedAt()) > date('-2months') %}
iconClassName = 'kohinos-map-icon new-presta-icon';
{% endif %}
var icon = L.icon({
iconSize: [50, 50],
iconAnchor: [25,50],
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>
$('[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);
{# 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') %}
iconClassName = 'kohinos-map-icon new-presta-icon';
{% endif %}
var icon = L.icon({
iconSize: [50, 50],
iconAnchor: [25,50],
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 %}
<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 %}
{% endfor %}
{% endif %}
{% endfor %}
}
{% 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>
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