templates/Lenord/Main/cartographie.html.twig line 1

Open in your IDE?
  1. {% extends 'Lenord/base.html.twig' %}
  2. {% block header_epingles %}
  3.   {{ include('Lenord/Main/parts/epingles.html.twig') }}
  4. {% endblock %}
  5. {% block header_breadcrumb %}
  6.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  7. {% endblock %}
  8. {% block header_breadcrumb_pdf %}
  9.   {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}
  10. {% endblock %}
  11. {% block body %}
  12.   <main tabindex="-1" role="main" id="mainContent">
  13.     {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--leNord --barHeading --barHeadingIcon --blueMedium'} %}
  14.     <div class="barHeading --leNord --icon">
  15.       <h1>
  16.         <span class="__icon">{{ source('svg/icons/icon-map.svg') }}</span>
  17.         <span class="__text">Cartographie</span>
  18.       </h1>
  19.     </div>
  20.     <form class="containerFiltersMap">
  21.       <div class="barFilter --top">
  22.         <div class="container">
  23.           <div class="__inner">
  24.             <div id="blockFilter1" class="">
  25.               <div>
  26.                 <div><select id="dropdown_thematique" class="form-control" aria-label="Thématiques, mise à jour de la carte des services du Département du Nord">
  27.                     <option value="thematique" selected class="__first">THÉMATIQUE</option>
  28.                     {% for categorie in array_thematiques %}
  29.                       <option
  30.                         value="{{ categorie.slug| replace({ 'á':'a', 'é':'e', 'í':'i', 'ó':'o', 'ú':'u' }) }}">{{ categorie.name|capitalize|replace({ '-':' ' }) }}</option>
  31.                     {% endfor %}
  32.                   </select></div>
  33.                 <div><select id="dropdown_besoin" disabled class="form-control" aria-label="Besoin, mise à jour de la carte des services du Département du Nord">
  34.                     <option selected value="besoin" class="__first">BESOIN</option>
  35.                     {% for categorie in array_besoins %}
  36.                       <option style="display:none;" class="option_besoin {{ categorie.parent }}"
  37.                               data-parent="{{ categorie.parent }}"
  38.                               value="{{ categorie.slug }}">{{ categorie.name }}</option>
  39.                     {% endfor %}
  40.                   </select></div>
  41.               </div>
  42.             </div>
  43.             <div id="blockFilter2" class="">
  44.               <div>
  45.                 <select id="dropdown_final" class="form-control" aria-label="Type d'établissement, mise à jour de la carte des services du Département du Nord">
  46.                   <option value="type" selected class="__first">TYPE D'ÉTABLISSEMENT</option>
  47.                   {% for categorie in array_etablissements %}
  48.                     <option value="{{ categorie.slug }}">{{ categorie.name }}</option>
  49.                   {% endfor %}
  50.                 </select>
  51.               </div>
  52.             </div>
  53.             <div id="blockFilter3" class="">
  54.               <div class="formSearchMain _header form --leNord">
  55.                 <label for="inputSearchPoints" hidden>Rechercher</label>
  56.                 <div class="__input-wrapper">
  57.                   <input required name="search" title="Je recherche" type="text" id="inputSearchPoints"
  58.                          placeholder="Je recherche" class="form-control __input-search">
  59.                   <button class="__btn-search" id="btnSubmitFormFilterSearch">
  60.                     <img src="{{ asset('img/brandmaster/icon-search-le-nord.svg') }}" alt="" aria-hidden="true">
  61.                     <span class="sr-only">Recherche</span>
  62.                   </button>
  63.                 </div>
  64.               </div>
  65.             </div>
  66.           </div>
  67.         </div>
  68.       </div>
  69.       <div class="barFilter --bottom">
  70.         <div class="container">
  71.           <div class="__inner">
  72.             <div>
  73.               <button type="button" class="btn btnMain --icon" id="btnGetLocation">
  74.                 <span class="__icon">{{ source('svg/icons/icon-target.svg') }}</span>
  75.                 <span class="__text">Près de moi</span>
  76.               </button>
  77.             </div>
  78.             <div id="blockFilterRegion">
  79.               <select class="form-control" id="dropdown_region" aria-label="Territoire, mise à jour de la carte des services du Département du Nord">
  80.                 <option selected value="region">Tout le département</option>
  81.                 {% for categorie in array_territoires %}
  82.                   <option value="{{ categorie.slug }}">{{ categorie.name|capitalize|replace({ '-':' ' }) }}</option>
  83.                 {% endfor %}
  84.               </select>
  85.             </div>
  86.             <div>
  87.               <button type="button" class="btn btnMain --transparent" data-toggle="collapse"
  88.                       data-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
  89.                 <span class="__text">Je ne connais pas mon lieu de vie</span>
  90.                 <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  91.               </button>
  92.             </div>
  93.           </div>
  94.         </div>
  95.       </div>
  96.     </form>
  97.     <div class="collapse collapseSearch" id="collapseSearch">
  98.       <div class="card card-body">
  99.         <div class="container">
  100.           <div class="__title">Je ne connais pas mon lieu de vie</div>
  101.           <div class="__search">
  102.             <form action="" id="search_territory" method="POST" class="formSearchMain _header form --leNord">
  103.               <label for="inputCollapseSearch" hidden>Rechercher</label>
  104.               <div class="__input-wrapper">
  105.                 <div class="containerAutocomplete">
  106.                   {% if false %}
  107.                     <input required name="search"
  108.                            title="Je recherche"
  109.                            type="text"
  110.                            id="inputCollapseSearch"
  111.                            aria-expanded="false"
  112.                            placeholder="Je recherche"
  113.                            class="form-control __input-search"
  114.                            role="combobox"
  115.                            aria-controls="autoComplete_list"
  116.                            autocomplete="off">
  117.                   {% endif %}
  118.                   <label for="inputAddress" hidden>
  119.                     <span class="label-text">Votre commune</span>
  120.                   </label>
  121.                   <div id="autocomplete" class="autocomplete --map">
  122.                     <input class="autocomplete-input --no-icon"
  123.                            placeholder="Je saisis ma commune"
  124.                            aria-label="Je saisis ma commune"
  125.                            id="inputCollapseSearch"
  126.                     >
  127.                     <ul class="autocomplete-result-list"></ul>
  128.                   </div>
  129.                   <script>
  130.                     (() => {
  131.                       new Autocomplete('#autocomplete', {
  132.                         search: input => {
  133.                           return new Promise(resolve => {
  134.                             if (input.length < 3) {
  135.                               return resolve([]);
  136.                             }
  137.                             fetch("{{ asset('json/autocomplete_vos_lieux.json') }}")
  138.                               .then(response => response.json())
  139.                               .then(data => {
  140.                                 let results = data
  141.                                   .map((result, index) => {
  142.                                     return { ...result, index };
  143.                                   })
  144.                                   .filter(result => result.name.toLowerCase().includes(input.toLowerCase()))
  145.                                   .sort((a, b) => {
  146.                                     if (a.match < b.match) return -1;
  147.                                     if (a.match > b.match) return 1;
  148.                                     return 0;
  149.                                   });
  150.                                 results = results.slice(0, 5);
  151.                                 resolve(results);
  152.                               })
  153.                           })
  154.                         },
  155.                         debounceTime: 0,
  156.                         submitOnEnter: true,
  157.                         renderResult: (result, props) => {
  158.                           return `
  159.                               <li ${props}>
  160.                                 ${result.name}
  161.                               </li>
  162.                             `
  163.                         },
  164.                         getResultValue: result => {
  165.                           return result.name;
  166.                         },
  167.                         onSubmit: result => {
  168.                           console.log(result);
  169.                         }
  170.                       })
  171.                     })();
  172.                   </script>
  173.                 </div>
  174.                 <div>
  175.                   <button type="submit"
  176.                           class="btn btnMain --icon"
  177.                           aria-controls="autoComplete_list"
  178.                           id="btnSubmitAutocomplete">
  179.                     <span class="__icon" aria-hidden="true">
  180.                       <img src="{{ asset('img/brandmaster/icon-search-1.svg') }}" alt="" aria-hidden="true">
  181.                     </span>
  182.                     <span class="sr-only">Recherche</span>
  183.                   </button>
  184.                 </div>
  185.               </div>
  186.             </form>
  187.           </div>
  188.           <div style="min-height:24px;display:none;" class="__containerResult" id="containerResultTerritory"
  189.                aria-live="polite">
  190.             <p id='myTerritory' class="__result" aria-hidden="true" style="display:none;height:0;"></p>
  191.             <p id="loadingSearchTerritory" class="loaderContainer __loader" aria-hidden="true"
  192.                style="display:none;height:0;">
  193.               <span class="loader">Chargement en cours</span>
  194.             </p>
  195.           </div>
  196.         </div>
  197.       </div>
  198.       <button type="button" class="__btnClose" data-toggle="collapse" data-target="#collapseSearch"
  199.               aria-expanded="false" aria-controls="collapseSearch">
  200.         <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  201.       </button>
  202.     </div>
  203.     <div class="container pBMd pTMd" aria-live="polite">
  204.       <h2 class="headingSection" id="containerCountResults" style="display:none;"><span id="countResults">Aucun filtre ou lieu actif</span>
  205.       </h2>
  206.       <div class="containerLoadingSpinner" style="display:block;min-height:54px;" id="containerLoader"
  207.            aria-hidden="true">
  208.         <div class="loader"></div>
  209.       </div>
  210.       <div class="containerAnchorReset pT mB" id="containerAnchorReset">
  211.         <button class="btn btnMain --transparent --underlineDefault" id="anchorResetFilters"><span class="__text">Rénitialiser ma recherche</span>
  212.         </button>
  213.       </div>
  214.       <p class="py-2 m-0"><a href="#skipmap" id="backmap" class="sr-only sr-only-focusable bg-white">Passer la carte</a></p>
  215.       <div>
  216.         <button type="button" class="btn btnMain btnShowCollapseMap" data-toggle="collapse" data-target="#collapseMap"
  217.                 aria-expanded="true" aria-controls="collapseMap" id="btnShowCollapseMap">
  218.           <span class="__text">Masquer la carte</span>
  219.           <span class="__text --hide">Déplier la carte</span>
  220.           <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  221.         </button>
  222.       </div>
  223.       <div class="collapse collapseMap show" id="collapseMap">
  224.         <div class="card card-body">
  225.           <div id='map-container' style="height:31.25em;"></div>
  226.         </div>
  227.       </div>
  228.       <p class="py-2 m-0"><a href="#backmap" id="skipmap" class="sr-only sr-only-focusable bg-white no-after">Revenir avant la carte</a></p>
  229.     </div>
  230.     {# knp_pagination_render(pagination) #}
  231.     <ul class="listResultsMap" id="containerResults">
  232.       <div class="container pBMd pTMd"><p class="__messageNoResults">Pour afficher un résultat de recherche, activez
  233.           l'un filtres ou l'une des options mis à votre disposition ci-avant</p></div>
  234.       {% if false %}
  235.         {% for poi in pois %}
  236.           <li class="__item {% if loop.index is odd %}--dark{% endif %}">
  237.             <div class="container">
  238.               <div class="__inner">
  239.                 <div>
  240.                   <div class="__img">
  241.                     <img src="{{ poi.image_url }}" alt="">
  242.                   </div>
  243.                 </div>
  244.                 <div>
  245.                   <div class="__details">
  246.                     <h3>{{ poi.name }}</h3>
  247.                     <p>{{ poi.address }}</p>
  248.                     <div>
  249.                       {% if poi.phone is not null %}<a href="tel:+33{{ poi.pĥone }}">+33
  250.                         (0){{poi.phone}}</a>{% endif %}
  251.                     </div>
  252.                   </div>
  253.                 </div>
  254.                 <div>
  255.                   <a href="https://www.google.com/maps/dir/?api=1&destination={{ poi.latitude }},{{ poi.longitude }}"
  256.                      target="_blank" data-open-point="{{ poi.id }}">
  257.                     <span class="__icon">{{ source('svg/icons/icon-send.svg') }}</span>
  258.                     <span class="__text">Y aller</span>
  259.                   </a>
  260.                 </div>
  261.                 {% if poi.description|length > 0 %}
  262.                   <div>
  263.                     <button type="button" class="btn btnMain btnShowCollapseInfoResult" data-toggle="collapse"
  264.                             data-target="#collapseInfoResultMap{{ poi.id }}" aria-expanded="false"
  265.                             aria-controls="collapseInfoResultMap{{ poi.id }}">
  266.                       <span class="__text">Plus d'information</span>
  267.                       <span class="__text --hide">Moins d'informations</span>
  268.                       <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  269.                     </button>
  270.                     <div class="collapse collapseInfoResultMap" id="collapseInfoResultMap{{ poi.id }}">
  271.                       <div class="card card-body">
  272.                         <div class="__inner">
  273.                           {{ poi.description|raw }}
  274.                         </div>
  275.                       </div>
  276.                     </div>
  277.                   </div>
  278.                 {% endif %}
  279.               </div>
  280.             </div>
  281.           </li>
  282.         {% endfor %}
  283.       {% endif %}
  284.     </ul>
  285.     {# knp_pagination_render(pagination) #}
  286.   </main>
  287. {% endblock %}
  288. {% block footer_top %}
  289.   {% if is_preview != 1 %}
  290.     <div class="container pB pT">
  291.       {% include 'Nordinfo/Main/parts/article-actions.html.twig' with {'post_title':'test', 'post_id':'test', 'is_nord_services':true} %}
  292.     </div>
  293.   {% endif %}
  294.   {% include 'Nordinfo/Main/parts/our-websites.html.twig' %}
  295. {% endblock %}
  296. {% block include_js %}
  297.   <script type='application/javascript' src='https://livemap.getwemap.com/js/sdk.min.js'></script>
  298.   <script>
  299.     $(function () {
  300.       var container = document.getElementById('map-container');
  301.       var btnGetLocation = document.getElementById('btnGetLocation');
  302.       var inputSearch = document.getElementById('inputSearchPoints');
  303.       var btnInputSearch = document.getElementById('btnSubmitFormFilterSearch');
  304.       var anchorResetFilters = document.getElementById('anchorResetFilters');
  305.       var containerResults = document.getElementById('containerResults');
  306.       var countResults = document.getElementById('countResults');
  307.       var containerCountResults = document.getElementById('containerCountResults');
  308.       var containerLoader = document.getElementById('containerLoader');
  309.       var blockFilter1 = document.getElementById('blockFilter1');
  310.       var blockFilter2 = document.getElementById('blockFilter2');
  311.       var blockFilter3 = document.getElementById('blockFilter3');
  312.       var blockFilterRegion = document.getElementById('blockFilterRegion');
  313.       var containerAnchorReset = document.getElementById('containerAnchorReset');
  314.       var dropdownThematique = document.getElementById('dropdown_thematique');
  315.       var dropdownBesoin = document.getElementById('dropdown_besoin');
  316.       var optionsBesoin = document.querySelectorAll('#dropdown_besoin option');
  317.       var dropdownFinal = document.getElementById('dropdown_final');
  318.       var dropdownRegion = document.getElementById('dropdown_region');
  319.       var btnShareUrl = document.getElementById('btnShareUrl');
  321.       if (document.body.contains(btnShareUrl)) {
  322.         btnShareUrl.setAttribute('data-clipboard-text', window.location.href);
  323.       }
  325.       var options = {
  326.         emmid: 22215,
  327.         token: '3GU8S4LI8EBXP87HGQBYBC21Z'
  328.       };
  329.       var livemap = wemap.v1.createLivemap(container, options);
  330.       var tag1 = '';
  331.       var tag2 = '';
  332.       var tags = [];
  333.       var query = '';
  334.       var filters = {};
  335.       var htmlResults = '';
  336.       var isActiveDropdownBesoin = false;
  337.       var isActiveDropdownFinal = false;
  338.       var isActiveDropdownRegion = false;
  339.       var isActiveInputSearch = false;
  340.       var isActiveInputSearchTemp = false;
  342.       var centerDefault = {latitude: 50.5450398, longitude: 2.9768406};
  343.       var zoomDefault = 8.39;
  345.       var htmlNoResults = `<div class="container pBMd pTMd"><p class="__messageNoResults">Pour afficher un résultat de recherche, activez l'un filtres ou l'une des options mis à votre disposition ci-avant</p></div>`;
  347.       $('#dropdown_thematique').on('change', function () {
  348.         resetSearch(true, false, false, false, true, true, true);
  349.         var parent = $(this).val();
  350.         blockFilter1.classList.remove('--active');
  351.         if ($(this).val() === 'thematique') {
  352.           $('#dropdown_besoin').prop("disabled", true);
  353.         } else {
  354.           containerAnchorReset.classList.add('--active');
  355.           $('#dropdown_besoin').prop("disabled", false);
  356.         }
  357.         if (!hasFilters()) {
  358.           resetSearch(true, false, false, false, false, false, false);
  359.         }
  360.         $('#dropdown_besoin option').each(function () {
  361.           if ($(this).val() !== "besoin") {
  362.             $(this).hide();
  363.           }
  364.         });
  365.         $('#dropdown_besoin').find('.' + parent).each(function () {
  366.           $(this).show();
  367.         });
  368.         $('#dropdown_besoin')[0].selectedIndex = 0;
  369.         $('#dropdown_final')[0].selectedIndex = 0;
  370.         tags = [];
  371.         tag1 = '';
  372.         tag2 = '';
  373.         filters = {
  374.           tags: tags,
  375.           query: query
  376.         };
  377.         livemap.setFilters(filters);
  378.         livemap.centerTo(centerDefault, zoomDefault);
  379.       });
  380.       $('#dropdown_besoin').on('change', function () {
  381.         containerCountResults.style.display = 'none';
  382.         containerLoader.style.display = 'block';
  383.         resetSearch(false, true, false, false, true, true, true);
  384.         if ($(this).val() === 'besoin') {
  385.           tag1 = ''
  386.           blockFilter1.classList.remove('--active');
  387.           isActiveDropdownBesoin = false;
  388.           if (!hasFilters()) {
  389.             resetSearch();
  390.           }
  391.         } else {
  392.           tag1 = $(this).val()
  393.           blockFilter1.classList.add('--active');
  394.           containerAnchorReset.classList.add('--active');
  395.           isActiveDropdownBesoin = true;
  396.         }
  397.         tags = [];
  398.         if (tag1 !== '') {
  399.           tags.push(tag1);
  400.         }
  401.         if (tag2 !== '') {
  402.           tags.push(tag2);
  403.         }
  404.         filters = {
  405.           tags: tags,
  406.           query: query
  407.         };
  408.         livemap.setFilters(filters);
  409.       });
  410.       $('#dropdown_final').on('change', function () {
  411.         containerCountResults.style.display = 'none';
  412.         containerLoader.style.display = 'block';
  413.         resetSearch(false, false, true, false, true, true, true);
  414.         if ($(this).val() === 'type') {
  415.           tag2 = '';
  416.           blockFilter2.classList.remove('--active');
  417.           isActiveDropdownFinal = false;
  418.           if (!hasFilters()) {
  419.             resetSearch();
  420.           }
  421.         } else {
  422.           tag2 = $(this).val();
  423.           blockFilter2.classList.add('--active');
  424.           containerAnchorReset.classList.add('--active');
  425.           isActiveDropdownFinal = true;
  426.         }
  427.         tags = [];
  428.         if (tag2 !== '') {
  429.           tags.push(tag2);
  430.         }
  431.         filters = {
  432.           tags: tags,
  433.           query: query
  434.         };
  435.         livemap.setFilters(filters);
  436.       });
  437.       $('#dropdown_region').on('change', function () {
  438.         containerCountResults.style.display = 'none';
  439.         containerLoader.style.display = 'block';
  440.         containerAnchorReset.classList.add('--active');
  441.         if ($(this).val() === 'region') {
  442.           isActiveDropdownRegion = false;
  443.           blockFilterRegion.classList.remove('--active');
  444.           if (!hasFilters()) {
  445.             resetSearch();
  446.           } else {
  447.             livemap.centerTo(centerDefault, zoomDefault);
  448.           }
  449.         } else {
  450.           isActiveDropdownRegion = true;
  451.           blockFilterRegion.classList.add('--active');
  452.         }
  453.         var center = {};
  454.         var zoom = 0;
  455.         switch ($(this).val()) {
  456.           case "douaisis":
  457.             center = {latitude: 50.3859531, longitude: 3.1599802};
  458.             zoom = 10.64;
  459.             livemap.centerTo(center, zoom);
  460.             break;
  461.           case "valenciennois":
  462.             center = {latitude: 50.3836017, longitude: 3.4548478};
  463.             zoom = 10.62;
  464.             livemap.centerTo(center, zoom);
  465.             break;
  466.           case "avesnois":
  467.             center = {latitude: 50.1677594, longitude: 3.9007506};
  468.             zoom = 10.31;
  469.             livemap.centerTo(center, zoom);
  470.             break;
  471.           case "cambrésis":
  472.             center = {latitude: 50.1442189, longitude: 3.3595081};
  473.             zoom = 10.66;
  474.             livemap.centerTo(center, zoom);
  475.             break;
  476.           case "flandre-intérieure":
  477.             center = {latitude: 50.8189520, longitude: 2.5221642};
  478.             zoom = 10.22;
  479.             livemap.centerTo(center, zoom);
  480.             break;
  481.           case "métropole":
  482.             center = {latitude: 50.6142362, longitude: 3.0592083};
  483.             zoom = 10.40;
  484.             livemap.centerTo(center, zoom);
  485.             break;
  486.           case "flandre-maritime":
  487.             center = {latitude: 50.9769493, longitude: 2.3545548};
  488.             zoom = 10.89;
  489.             livemap.centerTo(center, zoom);
  490.             break;
  491.         }
  492.         filters = {
  493.           tags: tags,
  494.           query: " "
  495.         };
  496.         if (query !== '') {
  497.           filters = {
  498.             tags: tags,
  499.             query: query
  500.           };
  501.         }
  502.         livemap.setFilters(filters);
  503.       });
  505.       function isOdd(num) {
  506.         return num % 2;
  507.       }
  509.       btnGetLocation.addEventListener('click', function () {
  510.         containerAnchorReset.classList.add('--active');
  511.         livemap.aroundMe().then(function () {
  512.           livemap.getUserLocation().then(function (location) {
  513.             //rechercher territoire
  514.             if (location != null) {
  515.               $.ajax({
  516.                 url: "https://api-adresse.data.gouv.fr/reverse/?lon=" + location.lng + "&lat=" + location.lat,
  517.                 success: function (response) {
  518.                   if (response.features.length > 0) {
  519.                     $.ajax({
  520.                       url: "{{ path('ajax_territory_lenord') }}",
  521.                       data: {
  522.                         'search': response.features[0].properties.city
  523.                       },
  524.                       type: "POST",
  525.                       success: function (response) {
  526.                         if (response.error === false) {
  527.                           var name = response.t.name;
  528.                           name = name.toLowerCase();
  529.                           name = name.replace(" ", "-");
  530.                           $('#dropdown_region').val(name);
  531.                         }
  532.                       }
  533.                     });
  534.                   } else {
  535.                     $('#dropdown_region').val('region');
  536.                   }
  537.                 }
  538.               });
  539.             }
  540.           });
  541.         });
  542.       });
  544.       btnInputSearch.addEventListener('click', function (e) {
  545.         e.preventDefault();
  546.         containerCountResults.style.display = 'none';
  547.         containerLoader.style.display = 'block';
  548.         handleInputSearch();
  549.       });
  551.       inputSearch.addEventListener("keyup", function (event) {
  552.         if (event.key === "Enter") {
  553.           handleInputSearch();
  554.         }
  555.       });
  557.       function handleInputSearch() {
  558.         let valueInputSearch = '';
  559.         if (inputSearch.value.length > 2) {
  560.           valueInputSearch = inputSearch.value;
  561.           resetSearch(false, false, false, true, true, true, true);
  562.           blockFilter3.classList.add('--active');
  563.           containerAnchorReset.classList.add('--active');
  564.           isActiveInputSearch = true;
  565.         } else {
  566.           valueInputSearch = '';
  567.           blockFilter3.classList.remove('--active');
  568.           isActiveInputSearch = false;
  569.           resetSearch(false, false, false, true, false, false, false);
  570.         }
  571.         filters = {
  572.           tags: tags,
  573.           query: valueInputSearch,
  574.         };
  575.         livemap.setFilters(filters);
  576.       }
  578.       livemap.addEventListener('contentUpdated', function (data) {
  579.         if (data.query.query) {
  580.           inputSearch.value = data.query.query;
  581.           // resetSearch(false, false, false, true, true, true, true);
  582.           if (data.query.query.length > 2) {
  583.             blockFilter3.classList.add('--active');
  584.             containerAnchorReset.classList.add('--active');
  585.             isActiveInputSearch = true;
  586.           } else {
  587.             blockFilter3.classList.remove('--active');
  588.             isActiveInputSearch = false;
  589.             countResults.innerText = 'Aucun filtre ou lieu actif';
  590.           }
  591.           isActiveInputSearchTemp = true;
  592.         } else {
  593.           inputSearch.value = '';
  594.           blockFilter3.classList.remove('--active');
  595.           if (isActiveInputSearchTemp) {
  596.             // resetSearch(false, false, false, true, false, false, false);
  597.             isActiveInputSearchTemp = false;
  598.           }
  599.           isActiveInputSearch = false;
  600.         }
  601.         if (hasFilters()) {
  602.           htmlResults = ``;
  603.           var classDark = '';
  604.           var htmlAnchorTel = ``;
  605.           var htmlAnchorEmail = ``;
  606.           containerResults.innerHTML = ``;
  607.           if (data.items.length > 0) {
  608.             data.items.forEach(function (el, index) {
  609.               if (el.phone) {
  610.                 const one = el.phone.slice(0, 3);
  611.                 const two = ' <span class="font-weight-bold">0' + el.phone.slice(3, 4) + ' ';
  612.                 const three = ' ' + el.phone.slice(4, 6) + ' ';
  613.                 const four = ' ' + el.phone.slice(6, 8) + ' ';
  614.                 const five = ' ' + el.phone.slice(8, 10) + ' ';
  615.                 const six = ' ' + el.phone.slice(10, 12) + '</span>';
  616.                 const phone = one + two + three + four + five + six;
  617.                 htmlAnchorTel = `<a href="tel:` + el.phone + `"><span class="__icon">{{ source('svg/icons/icon-telephone.svg') }}</span><span class="__text">` + phone + `</span></a>`;
  618.               }
  619.               if (el.external_data != null) {
  620.                 htmlAnchorEmail = `<a href="mailto::` + el.external_data + `"><span class="__icon">{{ source('svg/icons/icon-envelope.svg') }}</span><span class="__text"><b>` + el.external_data + `</b></span></a>`;
  621.               }
  622.               if (isOdd(index)) {
  623.                 classDark = '--dark';
  624.               } else {
  625.                 classDark = '';
  626.               }
  627.               var htmlMoreInfo = `
  628.               <div class="__colMoreDetails">
  629.                 <button type="button" class="btn btnMain btnShowCollapseInfoResult" data-toggle="collapse" data-target="#collapseInfoResultMap${el.id}" aria-expanded="false" aria-controls="collapseInfoResultMap${el.id}">
  630.                   <span class="__text">Plus d'information</span>
  631.                   <span class="__text --hide">Moins d'informations</span>
  632.                   <span class="__icon">{{ source('svg/icons/icon-chevron.svg') }}</span>
  633.                 </button>
  634.                 <div class="collapse collapseInfoResultMap" id="collapseInfoResultMap${el.id}">
  635.                   <div class="card card-body">
  636.                     <div class="__inner">
  637.                       ${el.description}
  638.                     </div>
  639.                   </div>
  640.                 </div>
  641.               </div>
  642.             `;
  643.               if (el.description.length === 0) {
  644.                 htmlMoreInfo = '';
  645.               }
  646.               htmlResults += `
  647.             <li class="__item ${classDark}">
  648.               <div class="container">
  649.                 <div class="__inner">
  650.                   <div class="__colImg">
  651.                     <div class="__img">
  652.                       <img src="${el.image_url}" alt="">
  653.                     </div>
  654.                   </div>
  655.                   <div class="__colDetails">
  656.                     <div class="__details">
  657.                       <h3>${el.name}</h3>
  658.                       <p>${el.address}</p>
  659.                       <div class="__buttons">
  660.                         ${htmlAnchorTel}
  661.                         ${htmlAnchorEmail}
  662.                       </div>
  663.                     </div>
  664.                   </div>
  665.                   ${htmlMoreInfo}
  666.                   <div class="__colAnchor">
  667.                     <a href="https://www.google.com/maps/dir/?api=1&destination=${el.latitude},${el.longitude}" target="_blank" data-open-point="${el.id}" title="Aller à ${el.name} (ouvre un autre onglet)">
  668.                         <span class="__icon">{{ source('svg/icons/icon-send.svg') }}</span>
  669.                         <span class="__text">
  670.                           <span>Y aller</span>
  671.                           <span>{{ source('svg/icons/icon-external.svg') }}</span>
  672.                         </span>
  673.                     </a>
  674.                   </div>
  675.                 </div>
  676.               </div>
  677.             </li>
  678.           `;
  679.             });
  680.           } else {
  681.             htmlResults += htmlNoResults
  682.           }
  683.           containerResults.innerHTML = htmlResults;
  684.           var str_lieu = ' lieux';
  685.           if (data.items.length === 1) {
  686.             str_lieu = ' lieu';
  687.           }
  688.           if ($('#dropdown_thematique').val() !== "thematique" && $('#dropdown_besoin').val() !== 'besoin') {
  689.             str_lieu += ' pour "' + $('#dropdown_thematique option:selected').text() + '", "' + $('#dropdown_besoin option:selected').text() + '"';
  690.           } else if ($('#dropdown_final').val() !== "type") {
  691.             str_lieu += ' pour "' + $('#dropdown_final option:selected').text() + '"';
  692.           }
  693.           if ($('#dropdown_region').val() !== "region") {
  694.             str_lieu += ' en ' + $('#dropdown_region option:selected').text();
  695.           }
  696.           if (inputSearch.value.length > 0 && inputSearch.value !== ' ') {
  697.             str_lieu += ' pour "' + inputSearch.value + '"';
  698.           }
  699.           countResults.innerText = data.items.length.toString() + str_lieu;
  700.         }
  701.         btnShareUrl.setAttribute('data-clipboard-text', window.location.href);
  702.         containerCountResults.style.display = 'block';
  703.         containerLoader.style.display = 'none';
  704.       });
  706.       anchorResetFilters.addEventListener('click', function (e) {
  707.         e.preventDefault();
  708.         resetSearch();
  709.       });
  711.       livemap.waitForReady().then(function() {
  712.         const iframes = document.querySelectorAll('iframe');
  713.         iframes.forEach((el) => {
  714.           if (el.getAttribute('title') === 'Interactive map') {
  715.             el.setAttribute('title', 'Carte interactive');
  716.           }
  717.         })
  718.       });
  720.       function resetSearch(
  721.         keepDropdownThematique = false,
  722.         keepDropdownBesoin = false,
  723.         keepDropdownFinal = false,
  724.         keepInputSearch = false,
  725.         keepDropdownRegion = false,
  726.         keepMapPosition = false,
  727.         keepResultsText = false
  728.       ) {
  729.         isActiveDropdownBesoin = false;
  730.         isActiveDropdownFinal = false;
  731.         isActiveDropdownRegion = false;
  732.         isActiveInputSearch = false;
  733.         tags = [];
  734.         query = '';
  735.         if (keepDropdownBesoin === false && keepDropdownThematique === false) {
  736.           $('#dropdown_besoin')[0].selectedIndex = 0;
  737.           $('#dropdown_thematique')[0].selectedIndex = 0;
  738.           $('#dropdown_besoin').prop("disabled", true);
  739.           blockFilter1.classList.remove('--active');
  740.         }
  741.         if (keepDropdownBesoin === true) {
  742.           tags.push($('#dropdown_besoin').val());
  743.         }
  744.         if (keepDropdownFinal === false) {
  745.           $('#dropdown_final')[0].selectedIndex = 0;
  746.           blockFilter2.classList.remove('--active');
  747.         } else {
  748.           tags.push($('#dropdown_final').val());
  749.         }
  750.         if (keepInputSearch === false) {
  751.           blockFilter3.classList.remove('--active');
  752.           inputSearch.value = '';
  753.         } else {
  754.           query = inputSearch.value;
  755.         }
  756.         if (keepDropdownRegion === false) {
  757.           $('#dropdown_region')[0].selectedIndex = 0;
  758.         }
  759.         filters = {
  760.           tags: tags,
  761.           query: query,
  762.         };
  763.         livemap.setFilters(filters);
  764.         if (keepMapPosition === false) {
  765.           livemap.centerTo(centerDefault, zoomDefault);
  766.         }
  767.         containerAnchorReset.classList.remove('--active');
  768.         if (keepResultsText === false) {
  769.           containerResults.innerHTML = '';
  770.           countResults.innerText = 'Aucun filtre ou lieu actif';
  771.         }
  772.         containerResults.innerHTML = htmlNoResults;
  773.       }
  775.       function hasFilters() {
  776.         return isActiveDropdownRegion || isActiveInputSearch || isActiveDropdownFinal || isActiveDropdownBesoin;
  777.       }
  779.       function updateFromUrl() {
  780.         let hash = '#/search@50.5432363,3.0645499,2.00'
  781.         if (window.location.hash !== '') {
  782.           hash = window.location.hash
  783.         }
  784.         const queryString = hash.replace('#/search?', '').split("@")[0]
  785.         const queryStringLatLongZoom = hash.replace('#/search?', '').split("@")[1].split(",")
  786.         const queryLat = parseFloat(queryStringLatLongZoom[0])
  787.         const queryLong = parseFloat(queryStringLatLongZoom[1])
  788.         const queryZoom = parseFloat(queryStringLatLongZoom[2])
  789.         const urlParams = new URLSearchParams(queryString)
  790.         let urlParamQuery = urlParams.get('query')
  791.         const urlParamTags = urlParams.get('tags')
  792.         if (urlParamTags) {
  793.           let isTagTypeBesoin = false;
  794.           for (let i = 0; i < optionsBesoin.length; i++) {
  795.             optionsBesoin[i].style.display = 'block';
  796.             if (urlParamTags === optionsBesoin[i].value) {
  797.               isTagTypeBesoin = true;
  798.             }
  799.           }
  800.           if (isTagTypeBesoin) {
  801.             dropdownBesoin.value = urlParamTags;
  802.             dropdownBesoin.disabled = false;
  803.             const optionSelected = dropdownBesoin.options[dropdownBesoin.selectedIndex];
  804.             const categoryParent = optionSelected.getAttribute('data-parent');
  805.             dropdownThematique.value = categoryParent;
  806.             for (let i = 0; i < optionsBesoin.length; i++) {
  807.               if (optionsBesoin[i].getAttribute('data-parent') !== categoryParent && optionsBesoin[i].value !== 'besoin') {
  808.                 optionsBesoin[i].style.display = 'none';
  809.               }
  810.             }
  811.             blockFilter1.classList.add('--active');
  812.             containerAnchorReset.classList.add('--active');
  813.             isActiveDropdownBesoin = true;
  814.           } else {
  815.             dropdownFinal.value = urlParamTags;
  816.             blockFilter2.classList.add('--active');
  817.             containerAnchorReset.classList.add('--active');
  818.             isActiveDropdownFinal = true;
  819.           }
  820.           filters = {
  821.             tags: [urlParamTags],
  822.             query: ''
  823.           };
  824.         } else if (urlParamQuery) {
  825.           if (urlParamQuery === ' ') {
  826.             filters = {
  827.               tags: [],
  828.               query: ' '
  829.             };
  830.           } else {
  831.             if (urlParamQuery.length < 3) {
  832.               urlParamQuery = ''
  833.             } else {
  834.               inputSearch.value = urlParamQuery;
  835.               blockFilter3.classList.add('--active');
  836.               containerAnchorReset.classList.add('--active');
  837.               isActiveInputSearch = true;
  838.             }
  839.             filters = {
  840.               tags: [],
  841.               query: urlParamQuery
  842.             };
  843.           }
  844.         }
  845.         setTimeout(function () {
  846.           const center = {latitude: queryLat + 0.00000001, longitude: queryLong};
  847.           const zoom = queryZoom;
  848.           if (urlParamQuery !== null) {
  849.             isActiveDropdownRegion = true;
  850.           }
  851.           if (queryLat === 50.3902713 && queryLong === 3.1783104 && queryZoom === 10.42) {
  852.             dropdownRegion.value = 'douaisis';
  853.             dropdownRegion.selectedIndex = 1;
  854.             containerAnchorReset.classList.add('--active');
  855.             blockFilterRegion.classList.add('--active');
  856.           } else if (queryLat === 50.3791889 && queryLong === 3.4514666 && queryZoom === 10.18) {
  857.             dropdownRegion.value = 'valenciennois';
  858.             containerAnchorReset.classList.add('--active');
  859.             blockFilterRegion.classList.add('--active');
  860.           } else if (queryLat === 50.1635116 && queryLong === 3.8820791 && queryZoom === 9.87) {
  861.             dropdownRegion.value = 'avesnois';
  862.             containerAnchorReset.classList.add('--active');
  863.             blockFilterRegion.classList.add('--active');
  864.           } else if (queryLat === 50.1488014 && queryLong === 3.5250235 && queryZoom === 10.44) {
  865.             dropdownRegion.value = 'cambrésis';
  866.             containerAnchorReset.classList.add('--active');
  867.             blockFilterRegion.classList.add('--active');
  868.           } else if (queryLat === 50.9742106 && queryLong === 2.3248100 && queryZoom === 10.58) {
  869.             dropdownRegion.value = 'flandres';
  870.             containerAnchorReset.classList.add('--active');
  871.             blockFilterRegion.classList.add('--active');
  872.           } else if (queryLat === 50.6164147 && queryLong === 3.0590916 && queryZoom === 10.00) {
  873.             dropdownRegion.value = 'métropole-lille';
  874.             containerAnchorReset.classList.add('--active');
  875.             blockFilterRegion.classList.add('--active');
  876.           } else if (queryLat === 50.8139616 && queryLong === 2.5300312 && queryZoom === 9.80) {
  877.             dropdownRegion.value = 'métropole-roubaix-tourcoing';
  878.             containerAnchorReset.classList.add('--active');
  879.             blockFilterRegion.classList.add('--active');
  880.           }
  881.           livemap.setCenter(center, zoom);
  882.           livemap.setFilters(filters);
  883.           containerCountResults.style.display = 'block';
  884.           containerLoader.style.display = 'none';
  885.         }, 1500)
  886.       }
  888.       updateFromUrl();
  890.     });
  891.   </script>
  892.   {% if false %}
  893.     <script>
  894.       (function() {
  895.         {% set autocomplete_selector = 'inputCollapseSearch' %}
  896.         const inputCollapseSearch = document.getElementById('inputCollapseSearch');
  897.         const btnSubmitAutocomplete = document.getElementById('btnSubmitAutocomplete');
  898.         const autoCompletejs = new autoComplete({
  899.           data: {
  900.             src: async function () {
  901.               document.querySelector("#{{ autocomplete_selector }}");
  902.               const source = await fetch("{{ asset('json/autocomplete_vos_lieux.json') }}");
  903.               return await source.json();
  904.             },
  905.             key: ["name"],
  906.           },
  907.           sort: function (a, b) {
  908.             if (a.match < b.match) {
  909.               return -1;
  910.             }
  911.             if (a.match > b.match) {
  912.               return 1;
  913.             }
  914.             return 0;
  915.           },
  916.           query: {
  917.             manipulate: function (query) {
  918.               return query.replace("@pizza", "burger");
  919.             },
  920.           },
  921.           trigger: {
  922.             event: ["input", "focusin", "focusout"],
  923.             condition: function (query) {
  924.               return !!query.replace(/ /g, "").length && query !== "hamburger";
  925.             },
  926.           },
  927.           placeHolder: "Je saisis ma commune",
  928.           selector: "#{{ autocomplete_selector }}",
  929.           debounce: 0,
  930.           searchEngine: "loose",
  931.           highlight: true,
  932.           maxResults: 5,
  933.           resultsList: {
  934.             render: true,
  935.             container: function (source) {
  936.               source.setAttribute("id", "autoComplete_list");
  937.               source.setAttribute('role', 'listbox');
  938.               source.setAttribute('aria-label', 'territoires');
  939.             },
  940.             element: "ul",
  941.             destination: document.querySelector("#{{ autocomplete_selector }}"),
  942.             position: "afterend",
  943.           },
  944.           resultItem: {
  945.             content: function (data, source) {
  946.               source.innerHTML = data.match;
  947.               source.setAttribute('role', 'option');
  948.             },
  949.             element: "li",
  950.           },
  951.           noResults: function () {
  952.             const result = document.createElement("li");
  953.             result.setAttribute("class", "no_result");
  954.             result.setAttribute("tabindex", "1");
  955.             result.innerHTML = "Aucun territoire trouvé";
  956.             document.querySelector("#autoComplete_list").appendChild(result);
  957.           },
  958.           onSelection: function (feedback) {
  959.             document.querySelector("#{{ autocomplete_selector }}").blur();
  960.             document.querySelector("#{{ autocomplete_selector }}").value = feedback.selection.value.name;
  961.             document.querySelector("#{{ autocomplete_selector }}").setAttribute("placeholder", "Je saisis ma commune");
  962.           }
  963.         });
  964.         ["focus", "blur"].forEach(function (eventType) {
  965.           const resultsList = document.querySelector("#autoComplete_list");
  966.           document.querySelector("#{{ autocomplete_selector }}").addEventListener(eventType, function () {
  967.             if (eventType === "blur") {
  968.               resultsList.style.display = "none";
  969.             } else if (eventType === "focus") {
  970.               resultsList.style.display = "block";
  971.             }
  972.           });
  973.         });
  974.         inputCollapseSearch.addEventListener('blur', () => {
  975.           inputCollapseSearch.setAttribute('aria-expanded', 'false');
  976.           btnSubmitAutocomplete.setAttribute('aria-expanded', 'false');
  977.         });
  978.         inputCollapseSearch.addEventListener('focus', () => {
  979.           inputCollapseSearch.setAttribute('aria-expanded', 'true');
  980.           btnSubmitAutocomplete.setAttribute('aria-expanded', 'true');
  981.         });
  982.         inputCollapseSearch.addEventListener('keyup', (e) => {
  983.           if (e.key === 'Escape' || e.keyCode === 27) {
  984.             inputCollapseSearch.blur();
  985.           }
  986.         });
  987.       })();
  988.     </script>
  989.   {% endif %}
  990.   <script>
  991.     (function () {
  992.       $('#search_territory').on('submit', function (event) {
  993.         event.preventDefault();
  994.         $('#containerResultTerritory').fadeIn();
  995.         $('#loadingSearchTerritory').fadeIn();
  996.         $('#myTerritory').fadeOut();
  997.         $('#loadingSearchTerritory')[0].setAttribute('aria-hidden', 'true');
  998.         $('#myTerritory')[0].setAttribute('aria-hidden', 'true');
  999.         $.ajax({
  1000.           url: "{{ path('ajax_territory_lenord') }}",
  1001.           data: {
  1002.             'search': $('#inputCollapseSearch').val()
  1003.           },
  1004.           type: "POST",
  1005.           success: function (response) {
  1006.             $('#loadingSearchTerritory').fadeOut();
  1007.             $('#loadingSearchTerritory')[0].setAttribute('aria-hidden', 'true');
  1008.             if (response.error === false) {
  1009.               $('#myTerritory').empty().append("Mon territoire : " + response.t.name);
  1010.             } else {
  1011.               $('#myTerritory').empty().append(response.error);
  1012.             }
  1013.             $('#myTerritory').fadeIn();
  1014.             $('#myTerritory')[0].setAttribute('aria-hidden', 'false');
  1015.           }
  1016.         });
  1017.         return false;
  1018.       });
  1019.     })();
  1020.   </script>
  1021. {% endblock %}