From a87ac9f3183bbde8dab3a7ef9b7ecb5c1a48c75e Mon Sep 17 00:00:00 2001
From: ewaldsc <ewaldsc@users.noreply.github.com>
Date: Mon, 15 Jan 2024 07:37:00 -0300
Subject: [PATCH] =?UTF-8?q?Corre=C3=A7=C3=A3o=20do=20BUG=20do=20Firefox=20?=
 =?UTF-8?q?e=20espa=C3=A7amento=20dos=20CARDS=20no=20mapa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Correção do BUG no Firefox de ordenação da lista de ativos e clique nos estabelecimento.
- Verificação e correção de erro de CSS e espaçamento dos cards dento dos pop-ups do mapa.
- Novos debugs criados e já comentados
---
 assets/css/mapaloja.style.css |    8 +-
 js/mapaloja.app.js            |   65 +-
 js/mapalojaBugFirefox.app.js  | 1198 +++++++++++++++++++++++++++++++++
 3 files changed, 1252 insertions(+), 19 deletions(-)
 create mode 100644 js/mapalojaBugFirefox.app.js

diff --git a/assets/css/mapaloja.style.css b/assets/css/mapaloja.style.css
index cf3e663..8889538 100644
--- a/assets/css/mapaloja.style.css
+++ b/assets/css/mapaloja.style.css
@@ -121,11 +121,15 @@ button.mapboxgl-ctrl-geocoder--button {
 .mapboxgl-popup-content {
     font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
     text-align: center;
-    padding: 5;
+    padding: 5px 7px 5px 7px;
     /* width: 250px; */
     width: 250px;
     color: #386650;
-  }
+}
+
+div.mapboxgl-popup-content img{
+    padding: 10px 0 5px 0;
+}
 
 .mapboxgl-popup-close-button {
     display: none;
diff --git a/js/mapaloja.app.js b/js/mapaloja.app.js
index dda6d0f..833d1e1 100644
--- a/js/mapaloja.app.js
+++ b/js/mapaloja.app.js
@@ -74,7 +74,7 @@ function loadCard(currentFeature) {
       // description = '<a href="'+config.baseURL+'/redes/?img='+imagem+'.jpg"> <img src="../media/images/' + imagem + '.jpg" class="w-100"> </a> <br /> Produtos:<br />' + e.features[0].properties.Produtos; 
       
       //teste para exibir Região como texto abaixo da imagem
-      description += '<br /> Região:<br />' + regiao;
+      description += 'Região:<br />' + regiao;
          
       //teste para exibir lista de produtos em formato de lista abaixo da imagem
       // description += '<br /> Produtos:<br /> <ul>';
@@ -125,7 +125,7 @@ function createPopup(currentFeature) {
   let links = sellLinks(currentFeature);
   new mapboxgl.Popup({ closeOnClick: true, autoPan: true, anchor: 'bottom' })
     .setLngLat(currentFeature.geometry.coordinates)
-    .setHTML('<h3>' + currentFeature.properties[config.popupInfo] + '</h3> <br />' + conteudoPopup + '<br />' + links)
+    .setHTML('<h3>' + currentFeature.properties[config.popupInfo] + '</h3>' + conteudoPopup + '<br />' + links)
     .addTo(map);
 }
 
@@ -135,7 +135,7 @@ function buildLocationList(locationData) {
   const listings = document.getElementById('listings');
   listings.innerHTML = '';
   //debug
-  //console.log(locationData.features);
+  // console.log(locationData.features);
   //debug
   if(locationData.features.length == 0){
     listings.innerHTML = '<p class="txt-bold">Nenhum resultado encontrado.</p>';
@@ -271,11 +271,11 @@ function filtroProdutos(){
     //const value = e.target.value.trim().toLowerCase();
     
     let dataCinthia = data;
-    //console.log(dataCinthia);
+    // console.log(dataCinthia);
     
     const produtosCinthia = dataCinthia.features.map(feature => [feature.properties.Produtos, feature.properties.Nome, feature.properties.id]);
 
-    //console.dir(produtosCinthia); 
+    console.dir(produtosCinthia); 
     
      
     // Alerta com lista de locais que possuem o produto filtrado
@@ -348,15 +348,16 @@ function filtroProdutos(){
 
     filteredGeojson.features = [];
     filteredGeojson.features = filteredProductsGeojson.features;
+    // console.log("antes do atualizaMapaLista do filtroProdutos");
 
     atualizaMapaLista(filteredGeojson);
     // ativosDepois(filteredGeojson);
     // map.getSource('locationData').setData(filteredGeojson);
     // ativosAntes(filteredGeojson);
     // buildLocationList(filteredGeojson);
+    // console.log("depois do atualizaMapaLista do filtroProdutos");
     
-    
-    //console.log(filteredGeojson);
+    // console.log(filteredGeojson);
 
       
   }
@@ -376,7 +377,8 @@ function buildDropDownList(title, listItems) {
   const filterTitle = document.createElement('h3');
   filterTitle.innerText = title;
   //filterTitle.classList.add('py12', 'txt-bold');
-  filterTitle.classList.add('pb6', 'txt-bold');
+  // filterTitle.classList.add('pb6', 'txt-bold');
+  filterTitle.classList.add('pb6');
   mainDiv.appendChild(filterTitle);
 
   const selectContainer = document.createElement('div');
@@ -665,48 +667,75 @@ function applyFilters() {
     //   }
     //   return 0; // a must be equal to b
     // });
+    // console.log("antes do atualizaMapaLista do applyFilters");
 
     atualizaMapaLista(filteredGeojson);
     // ativosDepois(filteredGeojson);
     // map.getSource('locationData').setData(filteredGeojson);
     // ativosAntes(filteredGeojson);
     // buildLocationList(filteredGeojson);
-    
+    // console.log("depois do atualizaMapaLista do applyFilters");
     filtroProdutos();
     
   });
 }
 
 function ativosAntes(locationGeojson){
+  // console.log("ativosAntes");
   locationGeojson.features.sort((a, b) => {            
-    if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste === '') {
+    if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste !== 'Sim') {
       return -1;
+    } else if (a.properties.AtivoTeste !== 'Sim' && b.properties.AtivoTeste === 'Sim') {
+      return 1;
+    } else {
+      return 0; // dois iguais
     }
-    return 0; // dois iguais
   });
+  // // exibe a posição i no array properties[i] dos ativos no console
+  // for (let i = 0; i < locationGeojson.features.length; i++) {
+  //   if (locationGeojson.features[i].properties.AtivoTeste === 'Sim') {
+  //     console.log(i);
+  //   }
+  // } 
 }
+
 function ativosDepois(locationGeojson){
+  // console.log("ativosDepois");
   locationGeojson.features.sort((a, b) => {            
-    if (a.properties.AtivoTeste === '' && b.properties.AtivoTeste === 'Sim') {
+    if (a.properties.AtivoTeste !== 'Sim' && b.properties.AtivoTeste === 'Sim') {
       return -1;
+    } else if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste !== 'Sim') {
+      return 1;
+    } else {
+      return 0; // dois iguais
     }
-    return 0; // dois iguais
   });
+  // // exibe a posição i no array properties[i] dos ativos no console
+  // for (let i = 0; i < locationGeojson.features.length; i++) {
+  //   if (locationGeojson.features[i].properties.AtivoTeste === 'Sim') {
+  //     console.log(i);
+  //   }
+  // }
+   
 }
 
 //função que garante que os ícones ativos sejam renderizados por último no mapa e em primeiro na lista
 function atualizaMapaLista(locationGeojson){
+  // console.log("atualizaMapaLista inicio");
+  // console.log(locationGeojson);  
   ativosDepois(locationGeojson);
     
   map.getSource('locationData').setData(locationGeojson);
+  // console.log("atualizaMapaLista depois do map.setdata");
   ativosAntes(locationGeojson);
   buildLocationList(locationGeojson);
+  // console.log("atualizaMapaLista fim - após buildLocationList");
 }
 
 // função que remove o spinner após o carregamento de todos os ícones, é chamada no final de "map.on('load'..."
 function removeSpinner() {
   //debug
-  //console.log('removeSpinner()');
+  // console.log('removeSpinner()');
   //debug
   const spinnerEl = document.getElementById('spinner');
   const backgroundEl = document.getElementById('loading-background');
@@ -745,10 +774,12 @@ function removeFilters() {
   
   var inputProdutos = document.getElementById('produtos');
   inputProdutos.value = '';
+  // console.log("antes do atualizaMapaLista do removeFilters");
 
   atualizaMapaLista(geojsonData);
   // map.getSource('locationData').setData(geojsonData);
   // buildLocationList(geojsonData);
+  // console.log("depois do atualizaMapaLista do removeFilters");
 }
 
 function removeFiltersButton() {
@@ -829,7 +860,7 @@ function sortByDistance(selectedPoint) {
 
 geocoder.on('result', (ev) => {
   const searchResult = ev.result.geometry;
-  //console.log(searchResult);
+  // console.log(searchResult);
   removePopups();
   sortByDistance(searchResult);
 });
@@ -844,9 +875,9 @@ map.on('load', () => {
   map.addControl(navCtrl, 'top-left');
 
   // csv2geojson - following the Sheet Mapper tutorial https://www.mapbox.com/impact-tools/sheet-mapper
-  //console.log('loaded');
+  // console.log('loaded');
   $(document).ready(() => {
-    //console.log('ready');
+    // console.log('ready');
     $.ajax({
       type: 'GET',
       url: config.CSV,
diff --git a/js/mapalojaBugFirefox.app.js b/js/mapalojaBugFirefox.app.js
new file mode 100644
index 0000000..dda6d0f
--- /dev/null
+++ b/js/mapalojaBugFirefox.app.js
@@ -0,0 +1,1198 @@
+/* global config csv2geojson turf Assembly $ */
+'use strict';
+
+mapboxgl.accessToken = config.accessToken;
+const columnHeaders = config.sideBarInfo;
+
+//mapa de caracteres para limpar acentos e caracteres especiais para a busca
+var diacriticsMap = createDiacriticsMap();
+
+let geojsonData = {};
+const filteredGeojson = {
+  type: 'FeatureCollection',
+  features: [],
+};
+
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: config.style,
+  center: config.center,
+  zoom: config.zoom,
+  transformRequest: transformRequest,
+});
+
+function flyToLocation(currentFeature) {
+  map.flyTo({
+    center: currentFeature,
+    // zoom: config.flyzoom,
+    speed: config.flyspeed,
+    curve: config.flycurve,
+    padding: {top:100},
+    easing(t) {
+      return t;
+    }
+  });
+}
+
+function loadCard(currentFeature) {
+  var regiao = currentFeature.properties.Regiao;
+  var sigla = currentFeature.properties.Sigla;
+  var prefixo = sigla + "/";
+  
+ /*  if(regiao == "Serra da Mantiqueira"){
+    prefixo += "ma_";
+  }else if(regiao == "Vale do Paraíba"){
+    prefixo += "vp_";
+  }else if(regiao == "Serra do Mar"){
+    prefixo += "sm_";
+  }else if(regiao == "Serra da Bocaina"){
+    prefixo += "bo_";
+  }else{
+    prefixo = "";
+  } */
+  
+  var imagem = currentFeature.properties.Imagem;
+  var linkImagem = prefixo +  imagem;
+  
+  var description = "";
+  var classCardInativo = "";
+
+  var ativoteste = currentFeature.properties.AtivoTeste;
+  // if (ativoteste != "Sim"){
+  //   classCardInativo = 'img-inativo';
+  // }
+  
+  if(currentFeature.properties.Imagem == ""){
+    description = '<img src="../media/images/embreve.jpg" class="w-100">';
+  }else{
+    if (ativoteste != "Sim"){
+      description = '<img src="../media/cards/thumbs/' + imagem + '.jpg" class="w-100 img-inativo">';
+    }else{
+      description = '<a rel="mobile" href="../media/cards/mobile/' + imagem + '.jpg" class="swipebox none-mm" title="'+currentFeature.properties[config.popupInfo]+'"><img src="../media/cards/thumbs/' + imagem + '.jpg" class="w-100" alt=""></a><a rel="desktop" href="../media/cards/' + imagem + '.jpg" class="swipebox none block-mm" title="'+currentFeature.properties[config.popupInfo]+'"><img src="../media/cards/thumbs/' + imagem + '.jpg" class="w-100" alt=""></a>';
+    }
+      //teste para exibir lista de produtos como texto abaixo da imagem
+      // description = '<a href="'+config.baseURL+'/redes/?img='+imagem+'.jpg"> <img src="../media/images/' + imagem + '.jpg" class="w-100"> </a> <br /> Produtos:<br />' + e.features[0].properties.Produtos; 
+      
+      //teste para exibir Região como texto abaixo da imagem
+      description += '<br /> Região:<br />' + regiao;
+         
+      //teste para exibir lista de produtos em formato de lista abaixo da imagem
+      // description += '<br /> Produtos:<br /> <ul>';
+      // var produtos = e.features[0].properties.Produtos;
+      // var arrayprodutos = produtos.split(',');
+      // $.each(arrayprodutos, function(index, value) {
+        // description += "<li>" + value + "</li>";
+      // });
+      // description += '</ul>';
+      
+  }
+
+  
+  
+  return description;  
+}
+
+function sellLinks(currentFeature){
+  let retorno = "";
+  var whatsapp = currentFeature.properties.Whatsapp;
+  if (whatsapp != ""){
+    retorno += '<a class="link-whats" href="https://wa.me/55' + whatsapp + '?text=Te%20encontrei%20no%20CaipiratechLAB%20e%20eu%20tenho%20interesse%20em%20comprar%20de%20voc%C3%AA" target="_blank"> <i class="fa fa-whatsapp" aria-hidden="true"></i> Compre pelo WhatsApp</a>';
+    retorno += '<a class="link-whats" href="https://api.whatsapp.com/send/?phone=55' + whatsapp + '&text=Te%20encontrei%20no%20CaipiratechLAB%20e%20eu%20tenho%20interesse%20em%20comprar%20de%20voc%C3%AA&app_absent=1" target="_blank"> (Web)</a>';
+  }
+  
+  var telegram = currentFeature.properties.Telegram;
+  if (telegram != ""){
+    if (whatsapp != ""){
+      retorno += '<br />';
+    }
+    retorno += '<a class="link-telegram" href="https://t.me/' + telegram + '" target="_blank"> <i class="fa fa-telegram" aria-hidden="true"></i> Compre pelo Telegram!</a>';
+  }
+  
+  var ativoteste = currentFeature.properties.AtivoTeste;
+  if (ativoteste != "Sim"){
+    retorno = '<p class="link-inativo"> <i class="fa fa-exclamation-circle" aria-hidden="true"></i> INATIVO</p>';
+  }
+
+  return retorno;  
+}
+
+function createPopup(currentFeature) {
+  // const popups = document.getElementsByClassName('mapboxgl-popup');
+  // /** Check if there is already a popup on the map and if so, remove it */
+  // if (popups[0]) popups[0].remove();
+  removePopups();
+  let conteudoPopup = loadCard(currentFeature);
+  let links = sellLinks(currentFeature);
+  new mapboxgl.Popup({ closeOnClick: true, autoPan: true, anchor: 'bottom' })
+    .setLngLat(currentFeature.geometry.coordinates)
+    .setHTML('<h3>' + currentFeature.properties[config.popupInfo] + '</h3> <br />' + conteudoPopup + '<br />' + links)
+    .addTo(map);
+}
+
+function buildLocationList(locationData) {
+  /* Add a new listing section to the sidebar. */
+  
+  const listings = document.getElementById('listings');
+  listings.innerHTML = '';
+  //debug
+  //console.log(locationData.features);
+  //debug
+  if(locationData.features.length == 0){
+    listings.innerHTML = '<p class="txt-bold">Nenhum resultado encontrado.</p>';
+  }
+  locationData.features.forEach((location, i) => {
+    const prop = location.properties;
+
+    const listing = listings.appendChild(document.createElement('div'));
+    /* Assign a unique `id` to the listing. */
+    listing.id = 'listing-' + prop.id;
+
+    /* Assign the `item` class to each listing for styling. */
+    listing.className = 'item';
+
+    /* Add the link to the individual listing created above. */
+    const link = listing.appendChild(document.createElement('button'));
+    link.className = 'title';
+    link.id = 'link-' + prop.id;
+    link.innerHTML =
+      '<p style="line-height: 1.25">' + prop[columnHeaders[0]] + '</p>';
+
+    /* Add details to the individual listing. */
+    const details = listing.appendChild(document.createElement('div'));
+    details.className = 'content';
+
+    for (let i = 1; i < columnHeaders.length; i++) {
+      const div = document.createElement('div');
+      if(columnHeaders[i] == 'whats')
+      {
+        let links = sellLinks(location);
+        div.innerHTML += '<strong>'+links+'</strong>';
+          
+      } 
+      else if(columnHeaders[i] == 'Contato')
+      {
+        let ativoteste = location.properties.AtivoTeste;
+        if (ativoteste == "Sim"){
+          div.innerHTML += "<strong>" + columnHeaders[i] + ": </strong>";
+          div.innerHTML += prop[columnHeaders[i]];
+        }
+      }      
+      else if(columnHeaders[i] == 'distance')
+      {
+        if(prop[columnHeaders[i]] != undefined){
+          div.innerHTML += "<strong>Distância aprox.: </strong>";
+          if(prop[columnHeaders[i]] < 20)
+          {
+            div.innerHTML += " menos de 20 metros";
+          }else if(prop[columnHeaders[i]] < 1000)
+          {
+            div.innerHTML += prop[columnHeaders[i]].toFixed(2);
+            div.innerHTML += " m";
+          }else{
+            div.innerHTML += ((prop[columnHeaders[i]])/1000).toFixed(2);
+            div.innerHTML += " km";
+          }
+        }
+      }else {
+        div.innerHTML += "<strong>" + columnHeaders[i] + ": </strong>";
+        div.innerHTML += prop[columnHeaders[i]];
+      }
+      div.className;
+      details.appendChild(div);
+      
+    }
+
+    link.addEventListener('click', function () {
+      const clickedListing = location.geometry.coordinates;
+      flyToLocation(clickedListing);
+      createPopup(location);
+      sortByDistance(clickedListing);
+      // const geocoderInput = document.getElementsByClassName('mapboxgl-ctrl-geocoder--input');
+      // geocoderInput[0].value = ''; 
+      // geocoder._clear();
+      geocoder.clear();
+      document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].blur();
+
+      const activeItem = document.getElementsByClassName('active');
+      if (activeItem[0]) {
+        activeItem[0].classList.remove('active');
+      }
+      this.parentNode.classList.add('active');
+
+      const divList = document.querySelectorAll('.content');
+      const divCount = divList.length;
+      for (i = 0; i < divCount; i++) {
+        divList[i].style.maxHeight = null;
+      }
+
+      for (let i = 0; i < geojsonData.features.length; i++) {
+        this.parentNode.classList.remove('active');
+        this.classList.toggle('active');
+        const content = this.nextElementSibling;
+        if (content.style.maxHeight) {
+          content.style.maxHeight = null;
+        } else {
+          content.style.maxHeight = content.scrollHeight + 'px';
+        }
+      }
+    });
+  });
+  
+    
+  var value = document.getElementById('produtos').value;
+  if(value != "")
+  {
+    markSearch(value);
+  }
+  
+  
+}
+
+function filtroProdutos(){
+  var filteredProductsGeojson = {
+  type: 'FeatureCollection',
+  features: [],
+  };
+  
+  
+  var value = document.getElementById('produtos').value.trim().toLowerCase();
+  value = cleanString(value);
+  
+  
+  if(value.length){    
+    
+    let data;
+    if (filteredGeojson.features.length > 0) {
+      data = filteredGeojson;
+    } else {
+      data = geojsonData;
+    }
+    
+    //const value = e.target.value.trim().toLowerCase();
+    
+    let dataCinthia = data;
+    //console.log(dataCinthia);
+    
+    const produtosCinthia = dataCinthia.features.map(feature => [feature.properties.Produtos, feature.properties.Nome, feature.properties.id]);
+
+    //console.dir(produtosCinthia); 
+    
+     
+    // Alerta com lista de locais que possuem o produto filtrado
+    // let alerta = "Locais que possuem o texto '";
+    // alerta += value;
+    // alerta += "' dentro da lista de produtos: \n";
+    // for (let j = 0; j < produtosCinthia.length; j++) {
+      // //var produtos2 = produtosCinthia[j][0];
+      // var produtos2 = produtosCinthia[j][0].trim().toLowerCase();
+      // produtos2 = cleanString(produtos2);
+      
+      // if (produtos2.includes(value))
+      // {
+        // console.log(produtos2);
+        // alerta += " - ";
+        // alerta += produtosCinthia[j][1];
+        // alerta += "\n";
+      // }
+      // else
+      // {
+        // delete produtosCinthia[j];
+      // }
+    // }
+    // if(value != "")
+    // {
+      // alert(alerta);
+    // }
+    
+    for (let j = 0; j < produtosCinthia.length; j++) {
+      //var produtos2 = produtosCinthia[j][0];
+      var produtos2 = produtosCinthia[j][0].trim().toLowerCase();
+      produtos2 = cleanString(produtos2);
+      
+      if (!produtos2.includes(value))
+      {
+        delete produtosCinthia[j];
+      }      
+    }
+    
+  
+    
+   
+    
+    
+    produtosCinthia.forEach((filter) => {
+      dataCinthia.features.forEach((feature) => {      
+        if (feature.properties.id == filter[2]) {
+          if (
+            filteredProductsGeojson.features.filter(
+              (f) => f.properties.id === feature.properties.id,
+            ).length === 0
+          ) {
+            filteredProductsGeojson.features.push(feature);
+          }
+        }
+      });
+    });
+    
+    // original com erro de duplicidade por ignorar o filteredGeojson
+    // map.getSource('locationData').setData(filteredProductsGeojson);
+    // buildLocationList(filteredProductsGeojson);
+    
+    // console.log(filteredProductsGeojson);
+
+    // test1
+    // filteredGeojson = filteredProductsGeojson;
+    // map.getSource('locationData').setData(filteredGeojson);
+    // buildLocationList(filteredGeojson);
+    // console.log(filteredGeojson);
+
+    filteredGeojson.features = [];
+    filteredGeojson.features = filteredProductsGeojson.features;
+
+    atualizaMapaLista(filteredGeojson);
+    // ativosDepois(filteredGeojson);
+    // map.getSource('locationData').setData(filteredGeojson);
+    // ativosAntes(filteredGeojson);
+    // buildLocationList(filteredGeojson);
+    
+    
+    //console.log(filteredGeojson);
+
+      
+  }
+
+  
+}
+
+
+// Build dropdown list function
+// title - the name or 'category' of the selection e.g. 'Languages: '
+// defaultValue - the default option for the dropdown list
+// listItems - the array of filter items
+
+function buildDropDownList(title, listItems) {
+  const filtersDiv = document.getElementById('filters');
+  const mainDiv = document.createElement('div');
+  const filterTitle = document.createElement('h3');
+  filterTitle.innerText = title;
+  //filterTitle.classList.add('py12', 'txt-bold');
+  filterTitle.classList.add('pb6', 'txt-bold');
+  mainDiv.appendChild(filterTitle);
+
+  const selectContainer = document.createElement('div');
+  selectContainer.classList.add('select-container', 'center');
+
+  const dropDown = document.createElement('select');
+  dropDown.classList.add('select', 'filter-option');
+
+  const selectArrow = document.createElement('div');
+  selectArrow.classList.add('select-arrow');
+
+  const firstOption = document.createElement('option');
+  firstOption.textContent = "Não"; // defaultValue de todos os dropdowns, usando apenas em "exibir apenas ativos?"
+
+
+  dropDown.appendChild(firstOption);
+  selectContainer.appendChild(dropDown);
+  selectContainer.appendChild(selectArrow);
+  mainDiv.appendChild(selectContainer);
+
+  for (let i = 0; i < listItems.length; i++) {
+    const opt = listItems[i];
+    const el1 = document.createElement('option');
+    el1.textContent = opt;
+    el1.value = opt;
+    dropDown.appendChild(el1);
+  }
+  filtersDiv.appendChild(mainDiv);
+}
+
+// Build checkbox function
+// title - the name or 'category' of the selection e.g. 'Languages: '
+// listItems - the array of filter items
+// To DO: Clean up code - for every third checkbox, create a div and append new checkboxes to it
+
+function buildCheckbox(title, listItems) {
+  const filtersDiv = document.getElementById('filters');
+  const mainDiv = document.createElement('div');
+  const filterTitle = document.createElement('div');
+  const formatcontainer = document.createElement('div');
+  //filterTitle.classList.add('center', 'flex-parent', 'py12', 'txt-bold');
+  filterTitle.classList.add('center', 'flex-parent', 'pb6', 'txt-bold');
+  formatcontainer.classList.add(
+    'center',
+    'flex-parent',
+    'flex-parent--column',
+    'px3',
+    'flex-parent--space-between-main',
+  );
+  const secondLine = document.createElement('div');
+  secondLine.classList.add(
+    'center',
+    'flex-parent',
+    'py12',
+    'px3',
+    'flex-parent--space-between-main',
+  );
+  filterTitle.innerText = title;
+  mainDiv.classList.add('pb6');
+  mainDiv.appendChild(filterTitle);
+  mainDiv.appendChild(formatcontainer);
+
+  for (let i = 0; i < listItems.length; i++) {
+    const container = document.createElement('label');
+
+    container.classList.add('checkbox-container');
+
+    const input = document.createElement('input');
+    input.classList.add('px12', 'filter-option');
+    input.setAttribute('type', 'checkbox');
+    input.setAttribute('id', listItems[i]);
+    input.setAttribute('value', listItems[i]);
+
+    const checkboxDiv = document.createElement('div');
+    const inputValue = document.createElement('p');
+    inputValue.innerText = listItems[i];
+    checkboxDiv.classList.add('checkbox', 'mr6');
+    checkboxDiv.appendChild(Assembly.createIcon('check'));
+
+    container.appendChild(input);
+    container.appendChild(checkboxDiv);
+    container.appendChild(inputValue);
+
+    formatcontainer.appendChild(container);
+  }
+  filtersDiv.appendChild(mainDiv);
+}
+
+// Build textInput function
+// title - the name or 'category' of the selection e.g. 'Produtos: '
+// listItems - the array of filter items
+
+function buildTextInput(title, placeholder, id) {
+  const filtersDiv = document.getElementById('filters');
+  const mainDiv = document.createElement('div');
+  const filterTitle = document.createElement('div');
+  const formatcontainer = document.createElement('div');
+  //filterTitle.classList.add('center', 'flex-parent', 'py12', 'txt-bold');
+  filterTitle.classList.add('center', 'flex-parent', 'pb6', 'txt-bold');
+  formatcontainer.classList.add(
+    'center',
+    'flex-parent',
+    'flex-parent--column',
+    'px3',
+    'flex-parent--space-between-main',
+  );
+  
+  filterTitle.innerText = title;
+  mainDiv.classList.add('pb6');
+  mainDiv.appendChild(filterTitle);
+  mainDiv.appendChild(formatcontainer);
+
+
+  const input = document.createElement('input');
+
+  input.classList.add('px12', 'filter-option');
+  input.setAttribute('type', 'text');
+  input.setAttribute('id', id);
+  input.setAttribute('placeholder', placeholder);
+
+
+  formatcontainer.appendChild(input);
+
+  filtersDiv.appendChild(mainDiv);
+}
+
+const selectFilters = [];
+const checkboxFilters = [];
+const textFilters = [];
+
+function createFilterObject(filterSettings) {
+  filterSettings.forEach((filter) => {
+    if (filter.type === 'checkbox') {
+      const keyValues = {};
+      Object.assign(keyValues, {
+        header: filter.columnHeader,
+        value: filter.listItems,
+      });
+      checkboxFilters.push(keyValues);
+    }
+    if (filter.type === 'dropdown') {
+      const keyValues = {};
+      Object.assign(keyValues, {
+        header: filter.columnHeader,
+        value: filter.listItems,
+      });
+      selectFilters.push(keyValues);
+    }
+    if (filter.type === 'text') {
+      const keyValues = {};
+      Object.assign(keyValues, {
+        header: filter.columnHeader,
+        value: filter.listItems,
+      });
+      textFilters.push(keyValues);
+    }
+  });
+}
+
+function applyFilters() {
+  const filterForm = document.getElementById('filters');
+
+  // filterForm.addEventListener('change', function () {
+  filterForm.addEventListener('input', function () {
+    // const popups = document.getElementsByClassName('mapboxgl-popup');
+    // /** Check if there is already a popup on the map and if so, remove it */
+    // if (popups[0]) popups[0].remove();
+
+    removePopups();
+    
+    const filterOptionHTML = this.getElementsByClassName('filter-option');
+    const filterOption = [].slice.call(filterOptionHTML);
+
+    const geojSelectFilters = [];
+    const geojCheckboxFilters = [];
+    const geojTextFilters = [];
+
+    filteredGeojson.features = [];
+    // const filteredFeatures = [];
+    // filteredGeojson.features = [];
+
+    filterOption.forEach((filter) => {
+      if (filter.type === 'checkbox' && filter.checked) {
+        checkboxFilters.forEach((objs) => {
+          Object.entries(objs).forEach(([, value]) => {
+            if (value.includes(filter.value)) {
+              const geojFilter = [objs.header, filter.value];
+              geojCheckboxFilters.push(geojFilter);
+            }
+          });
+        });
+      }
+      if (filter.type === 'select-one' && filter.value) {
+        selectFilters.forEach((objs) => {
+          Object.entries(objs).forEach(([, value]) => {
+            if (value.includes(filter.value)) {
+              const geojFilter = [objs.header, filter.value];
+              geojSelectFilters.push(geojFilter);
+            }
+          });
+        });
+      }
+      // if (filter.type === 'text' && filter.value) {
+        // textFilters.forEach((objs) => {
+          // Object.entries(objs).forEach(([, value]) => {
+            // if (value.includes(filter.value)) {
+              // const geojFilter = [objs.header, filter.value];
+              // geojTextFilters.push(geojFilter);
+            // }
+          // });
+        // });
+      // }
+    });
+
+    if (geojCheckboxFilters.length === 0 && geojSelectFilters.length === 0) {
+      geojsonData.features.forEach((feature) => {
+        filteredGeojson.features.push(feature);
+      });
+    } else if (geojCheckboxFilters.length > 0) {
+      geojCheckboxFilters.forEach((filter) => {
+        geojsonData.features.forEach((feature) => {
+          if (feature.properties[filter[0]].includes(filter[1])) {
+            if (
+              filteredGeojson.features.filter(
+                (f) => f.properties.id === feature.properties.id,
+              ).length === 0
+            ) {
+              filteredGeojson.features.push(feature);
+            }
+          }
+        });
+      });
+      if (geojSelectFilters.length > 0) {
+        const removeIds = [];
+        filteredGeojson.features.forEach((feature) => {
+          let selected = true;
+          geojSelectFilters.forEach((filter) => {
+            if (
+              feature.properties[filter[0]].indexOf(filter[1]) < 0 &&
+              selected === true
+            ) {
+              selected = false;
+              removeIds.push(feature.properties.id);
+            } else if (selected === false) {
+              removeIds.push(feature.properties.id);
+            }
+          });
+        });
+        let uniqueRemoveIds = [...new Set(removeIds)];
+        uniqueRemoveIds.forEach(function (id) {
+          const idx = filteredGeojson.features.findIndex(
+            (f) => f.properties.id === id,
+          );
+          filteredGeojson.features.splice(idx, 1);
+        });
+      }
+    } else {
+      geojsonData.features.forEach((feature) => {
+        let selected = true;
+        geojSelectFilters.forEach((filter) => {
+          if (
+            !feature.properties[filter[0]].includes(filter[1]) &&
+            selected === true
+          ) {
+            selected = false;
+          }
+        });
+        if (
+          selected === true &&
+          filteredGeojson.features.filter(
+            (f) => f.properties.id === feature.properties.id,
+          ).length === 0
+        ) {
+          filteredGeojson.features.push(feature);
+        }
+      });
+    }
+    // console.log(filteredGeojson);
+    
+    // filteredGeojson.features.sort((a, b) => { 
+    //   if (a.properties.AtivoTeste === '' && b.properties.AtivoTeste === 'Sim') {
+    //     return 1;
+    //   }
+    //   if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste === '') {
+    //     return -1;
+    //   }
+    //   return 0; // a must be equal to b
+    // });
+
+    atualizaMapaLista(filteredGeojson);
+    // ativosDepois(filteredGeojson);
+    // map.getSource('locationData').setData(filteredGeojson);
+    // ativosAntes(filteredGeojson);
+    // buildLocationList(filteredGeojson);
+    
+    filtroProdutos();
+    
+  });
+}
+
+function ativosAntes(locationGeojson){
+  locationGeojson.features.sort((a, b) => {            
+    if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste === '') {
+      return -1;
+    }
+    return 0; // dois iguais
+  });
+}
+function ativosDepois(locationGeojson){
+  locationGeojson.features.sort((a, b) => {            
+    if (a.properties.AtivoTeste === '' && b.properties.AtivoTeste === 'Sim') {
+      return -1;
+    }
+    return 0; // dois iguais
+  });
+}
+
+//função que garante que os ícones ativos sejam renderizados por último no mapa e em primeiro na lista
+function atualizaMapaLista(locationGeojson){
+  ativosDepois(locationGeojson);
+    
+  map.getSource('locationData').setData(locationGeojson);
+  ativosAntes(locationGeojson);
+  buildLocationList(locationGeojson);
+}
+
+// função que remove o spinner após o carregamento de todos os ícones, é chamada no final de "map.on('load'..."
+function removeSpinner() {
+  //debug
+  //console.log('removeSpinner()');
+  //debug
+  const spinnerEl = document.getElementById('spinner');
+  const backgroundEl = document.getElementById('loading-background');
+  spinnerEl.classList.remove('loading');
+  backgroundEl.classList.remove('absolute');
+  backgroundEl.classList.add('none');
+}
+
+function filters(filterSettings) {
+  filterSettings.forEach((filter) => {
+    if (filter.type === 'checkbox') {
+      buildCheckbox(filter.title, filter.listItems);
+    } else if (filter.type === 'dropdown') {
+      buildDropDownList(filter.title, filter.listItems);
+    } else if (filter.type === 'text') {
+      buildTextInput(filter.title, filter.placeholder, filter.id);
+    }
+  });
+}
+
+function removeFilters() {
+  const input = document.getElementsByTagName('input');
+  const select = document.getElementsByTagName('select');
+  const selectOption = [].slice.call(select);
+  const checkboxOption = [].slice.call(input);
+  filteredGeojson.features = [];
+  checkboxOption.forEach((checkbox) => {
+    if (checkbox.type === 'checkbox' && checkbox.checked === true) {
+      checkbox.checked = false;
+    }
+  });
+
+  selectOption.forEach((option) => {
+    option.selectedIndex = 0;
+  });
+  
+  var inputProdutos = document.getElementById('produtos');
+  inputProdutos.value = '';
+
+  atualizaMapaLista(geojsonData);
+  // map.getSource('locationData').setData(geojsonData);
+  // buildLocationList(geojsonData);
+}
+
+function removeFiltersButton() {
+  const removeFilter = document.getElementById('removeFilters');
+  removeFilter.addEventListener('click', () => {
+    removeFilters();
+    removePopups();
+  });
+}
+
+function removePopups() {
+  const popups = document.getElementsByClassName('mapboxgl-popup');
+  /** Check if there is already a popup on the map and if so, remove it */
+  if (popups[0]) popups[0].remove();
+}
+
+createFilterObject(config.filters);
+applyFilters();
+filters(config.filters);
+removeFiltersButton();
+
+const geocoder = new MapboxGeocoder({
+  accessToken: mapboxgl.accessToken, // Set the access token
+  mapboxgl: mapboxgl, // Set the mapbox-gl instance
+  marker: true, // Use the geocoder's default marker style
+  flyTo:
+  {
+    zoom: config.flyzoom,
+    speed: config.flyspeed,
+    curve: config.flycurve,
+    easing(t) {
+      return t;
+    }
+  },
+  placeholder: 'Busca por localização',
+});
+
+
+
+
+function sortByDistance(selectedPoint) {
+  const options = { units: 'meters' };
+  let data;
+  if (filteredGeojson.features.length > 0) {
+    data = filteredGeojson;
+  } else {
+    data = geojsonData;
+  }
+  data.features.forEach((data) => {
+    Object.defineProperty(data.properties, 'distance', {
+      value: turf.distance(selectedPoint, data.geometry, options),
+      writable: true,
+      enumerable: true,
+      configurable: true,
+    });
+  });
+
+  // console.log(data);
+  // console.log(selectedPoint);
+
+  data.features.sort((a, b) => {
+    if (a.properties.distance > b.properties.distance) {
+      return 1;
+    }
+    if (a.properties.distance < b.properties.distance) {
+      return -1;
+    }
+    return 0; // a must be equal to b
+  });
+
+
+  const listings = document.getElementById('listings');
+  while (listings.firstChild) {
+    listings.removeChild(listings.firstChild);
+  }
+  buildLocationList(data);
+}
+
+geocoder.on('result', (ev) => {
+  const searchResult = ev.result.geometry;
+  //console.log(searchResult);
+  removePopups();
+  sortByDistance(searchResult);
+});
+
+var navCtrl = new mapboxgl.NavigationControl({
+        showCompass: false,
+        showZoom: true
+      });
+
+map.on('load', () => {
+  map.addControl(geocoder, 'top-right');
+  map.addControl(navCtrl, 'top-left');
+
+  // csv2geojson - following the Sheet Mapper tutorial https://www.mapbox.com/impact-tools/sheet-mapper
+  //console.log('loaded');
+  $(document).ready(() => {
+    //console.log('ready');
+    $.ajax({
+      type: 'GET',
+      url: config.CSV,
+      dataType: 'text',
+      success: function (csvData) {
+        makeGeoJSON(csvData);
+      },
+      error: function (request, status, error) {
+        console.log(request);
+        console.log(status);
+        console.log(error);
+      },
+    });
+  });
+
+  function makeGeoJSON(csvData) {
+    csv2geojson.csv2geojson(
+      csvData,
+      {
+        latfield: 'Latitude',
+        lonfield: 'Longitude',
+        delimiter: ',',
+      },
+      (err, data) => {
+        data.features.forEach((data, i) => {
+          data.properties.id = i;
+        });
+
+        geojsonData = data;
+        
+
+        // Load the images in parallel
+        Promise.all([
+          new Promise((resolve, reject) => {
+            map.loadImage('../media/mapa/verde.png', (error, image) => {
+              if (error) reject(error);
+              map.addImage('verde', image);
+              resolve();
+            });
+          }),
+          new Promise((resolve, reject) => {
+            map.loadImage('../media/mapa/vermelho.png', (error, image) => {
+              if (error) reject(error);
+              map.addImage('vermelho', image);
+              resolve();
+            });
+          })
+        ]).then(() => {
+
+          ativosDepois(geojsonData);
+          // geojsonData.features.sort((a, b) => {            
+          //   if (a.properties.AtivoTeste === '' && b.properties.AtivoTeste === 'Sim') {
+          //     return -1;
+          //   }
+          //   return 0; // dois iguais
+          // });
+
+          // Add the layer to the map
+          map.addLayer({
+            'id': 'locationData',
+            'type': 'symbol',
+            'source': {
+              'type': 'geojson',
+              'data': geojsonData,
+            },
+            'layout': {
+              'visibility': 'visible',
+              'icon-image': ['match', ['get', 'AtivoTeste'], 'Sim', 'verde', 'vermelho'],
+              'icon-anchor': 'bottom',
+              'icon-allow-overlap': true,
+              'symbol-sort-key': ['match', ['get', 'AtivoTeste'], 'Sim', 1, 0],
+            },
+          });          
+
+          map.on('click', 'locationData', (e) => {
+            const features = map.queryRenderedFeatures(e.point, {
+              layers: ['locationData'],
+              limit: 1
+            });
+            
+            const clickedPoint = features[0].geometry.coordinates;
+            flyToLocation(clickedPoint);
+            sortByDistance(clickedPoint);
+            createPopup(features[0]);
+            //const geocoderInput = document.getElementsByClassName('mapboxgl-ctrl-geocoder--input');
+            //geocoderInput[0].value = '';
+            // geocoder._clear();
+            geocoder.clear();
+            document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].blur();
+          });
+
+          map.on('mouseenter', 'locationData', () => {
+            map.getCanvas().style.cursor = 'pointer';
+          });
+
+          map.on('mouseleave', 'locationData', () => {
+            map.getCanvas().style.cursor = '';
+          });
+          
+          ativosAntes(geojsonData);
+          // geojsonData.features.sort((a, b) => {            
+          //   if (a.properties.AtivoTeste === 'Sim' && b.properties.AtivoTeste === '') {
+          //     return -1;
+          //   }
+          //   return 0; // dois iguais
+          // });
+
+          buildLocationList(geojsonData);
+          removeSpinner();
+        }).catch((error) => {
+          console.error(error);
+        });
+      },
+    );
+  }
+});
+
+// Modal - popup for filtering results
+const filterResults = document.getElementById('filterResults');
+const exitButton = document.getElementById('exitButton');
+const modal = document.getElementById('modal');
+
+filterResults.addEventListener('click', () => {
+  modal.classList.toggle('hide-visually');
+  modal.classList.toggle('z5');
+  var x = document.querySelector("#filterResults>p");
+  if (x.innerHTML === "Mostrar Filtros") {
+    x.innerHTML = "Ocultar Filtros";
+  } else {
+    x.innerHTML = "Mostrar Filtros";
+  }
+  
+});
+
+exitButton.addEventListener('click', () => {
+  modal.classList.add('hide-visually');
+  var x = document.querySelector("#filterResults>p");
+  x.innerHTML = "Mostrar Filtros";
+});
+
+
+const title = document.getElementById('title');
+title.innerText = config.title;
+const description = document.getElementById('description');
+description.innerText = config.description;
+
+function transformRequest(url) {
+  const isMapboxRequest =
+    url.slice(8, 22) === 'api.mapbox.com' ||
+    url.slice(10, 26) === 'tiles.mapbox.com';
+  return {
+    url: isMapboxRequest ? url.replace('?', '?pluginName=finder&') : url,
+  };
+}
+
+//using SO Communitu wiki answer: https://stackoverflow.com/posts/18391901/revisions
+function createDiacriticsMap(){
+  var defaultDiacriticsRemovalMap = [
+    {'base':'A', 'letters':'\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F'},
+    {'base':'AA','letters':'\uA732'},
+    {'base':'AE','letters':'\u00C6\u01FC\u01E2'},
+    {'base':'AO','letters':'\uA734'},
+    {'base':'AU','letters':'\uA736'},
+    {'base':'AV','letters':'\uA738\uA73A'},
+    {'base':'AY','letters':'\uA73C'},
+    {'base':'B', 'letters':'\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181'},
+    {'base':'C', 'letters':'\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E'},
+    {'base':'D', 'letters':'\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779\u00D0'},
+    {'base':'DZ','letters':'\u01F1\u01C4'},
+    {'base':'Dz','letters':'\u01F2\u01C5'},
+    {'base':'E', 'letters':'\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E'},
+    {'base':'F', 'letters':'\u0046\u24BB\uFF26\u1E1E\u0191\uA77B'},
+    {'base':'G', 'letters':'\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E'},
+    {'base':'H', 'letters':'\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D'},
+    {'base':'I', 'letters':'\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197'},
+    {'base':'J', 'letters':'\u004A\u24BF\uFF2A\u0134\u0248'},
+    {'base':'K', 'letters':'\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2'},
+    {'base':'L', 'letters':'\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780'},
+    {'base':'LJ','letters':'\u01C7'},
+    {'base':'Lj','letters':'\u01C8'},
+    {'base':'M', 'letters':'\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C'},
+    {'base':'N', 'letters':'\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4'},
+    {'base':'NJ','letters':'\u01CA'},
+    {'base':'Nj','letters':'\u01CB'},
+    {'base':'O', 'letters':'\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C'},
+    {'base':'OI','letters':'\u01A2'},
+    {'base':'OO','letters':'\uA74E'},
+    {'base':'OU','letters':'\u0222'},
+    {'base':'OE','letters':'\u008C\u0152'},
+    {'base':'oe','letters':'\u009C\u0153'},
+    {'base':'P', 'letters':'\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754'},
+    {'base':'Q', 'letters':'\u0051\u24C6\uFF31\uA756\uA758\u024A'},
+    {'base':'R', 'letters':'\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782'},
+    {'base':'S', 'letters':'\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784'},
+    {'base':'T', 'letters':'\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786'},
+    {'base':'TZ','letters':'\uA728'},
+    {'base':'U', 'letters':'\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244'},
+    {'base':'V', 'letters':'\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245'},
+    {'base':'VY','letters':'\uA760'},
+    {'base':'W', 'letters':'\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72'},
+    {'base':'X', 'letters':'\u0058\u24CD\uFF38\u1E8A\u1E8C'},
+    {'base':'Y', 'letters':'\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE'},
+    {'base':'Z', 'letters':'\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762'},
+    {'base':'a', 'letters':'\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250'},
+    {'base':'aa','letters':'\uA733'},
+    {'base':'ae','letters':'\u00E6\u01FD\u01E3'},
+    {'base':'ao','letters':'\uA735'},
+    {'base':'au','letters':'\uA737'},
+    {'base':'av','letters':'\uA739\uA73B'},
+    {'base':'ay','letters':'\uA73D'},
+    {'base':'b', 'letters':'\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253'},
+    {'base':'c', 'letters':'\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184'},
+    {'base':'d', 'letters':'\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A'},
+    {'base':'dz','letters':'\u01F3\u01C6'},
+    {'base':'e', 'letters':'\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD'},
+    {'base':'f', 'letters':'\u0066\u24D5\uFF46\u1E1F\u0192\uA77C'},
+    {'base':'g', 'letters':'\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F'},
+    {'base':'h', 'letters':'\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265'},
+    {'base':'hv','letters':'\u0195'},
+    {'base':'i', 'letters':'\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131'},
+    {'base':'j', 'letters':'\u006A\u24D9\uFF4A\u0135\u01F0\u0249'},
+    {'base':'k', 'letters':'\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3'},
+    {'base':'l', 'letters':'\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747'},
+    {'base':'lj','letters':'\u01C9'},
+    {'base':'m', 'letters':'\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F'},
+    {'base':'n', 'letters':'\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5'},
+    {'base':'nj','letters':'\u01CC'},
+    {'base':'o', 'letters':'\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275'},
+    {'base':'oi','letters':'\u01A3'},
+    {'base':'ou','letters':'\u0223'},
+    {'base':'oo','letters':'\uA74F'},
+    {'base':'p','letters':'\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755'},
+    {'base':'q','letters':'\u0071\u24E0\uFF51\u024B\uA757\uA759'},
+    {'base':'r','letters':'\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783'},
+    {'base':'s','letters':'\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B'},
+    {'base':'t','letters':'\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787'},
+    {'base':'tz','letters':'\uA729'},
+    {'base':'u','letters': '\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289'},
+    {'base':'v','letters':'\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C'},
+    {'base':'vy','letters':'\uA761'},
+    {'base':'w','letters':'\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73'},
+    {'base':'x','letters':'\u0078\u24E7\uFF58\u1E8B\u1E8D'},
+    {'base':'y','letters':'\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF'},
+    {'base':'z','letters':'\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763'}
+  ];
+
+  var diacriticsMap = {};
+  for (var i=0; i < defaultDiacriticsRemovalMap .length; i++){
+    var letters = defaultDiacriticsRemovalMap [i].letters;
+    for (var j=0; j < letters.length ; j++){
+      diacriticsMap[letters[j]] = defaultDiacriticsRemovalMap [i].base;
+    }
+  }
+  
+  return diacriticsMap;
+  
+}
+
+function cleanString(str) {
+  
+  return str.replace(/[^\u0000-\u007E]/g, function(a){ 
+           return diacriticsMap[a] || a; 
+        });
+}
+
+function markSearch(busca) {
+  $("#listings").mark(busca, {
+    "separateWordSearch": false
+  });
+}
+
+
+
+
+// filtroProdutos();
+//listando os produtos filtrados em um alerta
+
+// var filteredProductsGeojson = {
+  // type: 'FeatureCollection',
+  // features: [],
+// };
+
+// document.getElementById('produtos').addEventListener('change', (e) => {
+  // let data;
+  // if (filteredGeojson.features.length > 0) {
+    // data = filteredGeojson;
+  // } else {
+    // data = geojsonData;
+  // }
+  
+  // const value = e.target.value.trim().toLowerCase();
+  
+  // let dataCinthia = data;
+  // console.log(dataCinthia);
+  
+  // const produtosCinthia = dataCinthia.features.map(feature => [feature.properties.Produtos, feature.properties.Nome, feature.properties.id]);
+
+  // console.dir(produtosCinthia); 
+  
+   
+  
+  // let alerta = "Locais que possuem o texto '";
+  // alerta += value;
+  // alerta += "' dentro da lista de produtos: \n";
+  // for (let j = 0; j < produtosCinthia.length; j++) {
+    // var produtos2 = produtosCinthia[j][0];
+    // if (produtos2.includes(value))
+    // {
+      // console.log(produtos2);
+      // alerta += " - ";
+      // alerta += produtosCinthia[j][1];
+      // alerta += "\n";
+    // }
+    // else
+    // {
+      // delete produtosCinthia[j];
+    // }
+  // }
+  // if(value != "")
+  // {
+    // alert(alerta);
+  // }
+  
+ 
+  
+  
+  // produtosCinthia.forEach((filter) => {
+    // dataCinthia.features.forEach((feature) => {      
+      // if (feature.properties.id == filter[2]) {
+        // if (
+          // filteredProductsGeojson.features.filter(
+            // (f) => f.properties.id === feature.properties.id,
+          // ).length === 0
+        // ) {
+          // filteredProductsGeojson.features.push(feature);
+        // }
+      // }
+    // });
+  // });
+  
+  // // map.getSource('locationData').setData(filteredProductsGeojson);
+  // // buildLocationList(filteredProductsGeojson);
+  
+  // console.log(filteredProductsGeojson);
+        
+
+    
+// });
+