Qgis2Web- Table entites filtrees - Webmapping

24 Nov 2021

Message posté par : MarineTfr (marine.tailfer(a)orange.fr)

----------------------------------------

Bonjour, 
Je débute en webmapping et j'ai créer une carte via Qgis2web avec l'ajout de
filtres et je souhaiterais pouvoir afficher une table des entités filtrées en dessous de
la carte.

J'ai trouvé cette solution de transformation de Json en table html:
https://codebun.com/convert-json-data-dynamically-to-html-table-using-jquer…

Mon problème est que n'arrive pas à déterminer sous quelle variable se retrouve les
entités filtrées dans le code du projet.

J'imagine que la réponse doit se trouver dans la partie suivante :

-----------------
	Code :
        var Filters = {"Loisir": "str","Ville":
"str","Sport": "str"};
        function filterFunc() {
          map.eachLayer(function(lyr){
          if ("options" in lyr && "dataVar" in
lyr["options"]){
            features =
this[lyr["options"]["dataVar"]].features.slice(0);
            try{
              for (key in Filters){
                keyS = key.replace(/[^a-zA-Z0-9_]/g, "")
                if (Filters[key] == "str" || Filters[key] == "bool"){
                  var selection = [];
                  var options = document.getElementById("sel_" + keyS).options
                  for (var i=0; i < options.length; i++) {
                    if (options.selected) selection.push(options.value);
                  }
                    try{
                      if (key in features[0].properties){
                        for (i = features.length - 1;
                          i >= 0; --i){
                          if (selection.indexOf(
                          features.properties[key])0) {
                          features.splice(i,1);
                          }
                        }
                      }
                    } catch(err){
                  }
                }
                if (Filters[key] == "int"){
                  sliderVals =  document.getElementById(
                    "div_" + keyS).noUiSlider.get();
                  try{
                    if (key in features[0].properties){
                    for (i = features.length - 1; i >= 0; --i){
                      if (parseInt(features.properties[key])
                          < sliderVals[0]
                          || parseInt(features.properties[key])
...
  sliderVals[1]){                            
features.splice(i,1);
                          }
                        }
                      }
                    } catch(err){
                    }
                  }
                if (Filters[key] == "real"){
                  sliderVals =  document.getElementById(
                    "div_" + keyS).noUiSlider.get();
                  try{
                    if (key in features[0].properties){
                    for (i = features.length - 1; i >= 0; --i){
                      if (features.properties[key]
                          < sliderVals[0]
                          || features.properties[key]
...
  sliderVals[1]){                            
features.splice(i,1);
                          }
                        }
                      }
                    } catch(err){
                    }
                  }
                if (Filters[key] == "date"
                  || Filters[key] == "datetime"
                  || Filters[key] == "time"){
                  try{
                    if (key in features[0].properties){
                      HTMLkey = key.replace(/[&/\#,+()$~%.'":*?{} ]/g,
'');
                      startdate = document.getElementById("dat_" +
                        HTMLkey + "_date1").value.replace(" ",
"T");
                      enddate = document.getElementById("dat_" +
                        HTMLkey + "_date2").value.replace(" ",
"T");
                      for (i = features.length - 1; i >= 0; --i){
                        if (features.properties[key] < startdate
                          || features.properties[key] > enddate){
                          features.splice(i,1);
                        }
                      }
                    }
                  } catch(err){
                  }
                }
              }
            } catch(err){
            }
          this[lyr["options"]["layerName"]].clearLayers();
          this[lyr["options"]["layerName"]].addData(features);
          }
          })
-----------------

J'ai mis mon projet test sur GitHub à l'adresse suivante :
https://marine-tailfer.github.io/test-table-filtre/

Merci aux personnes qui pourraient avoir des idées.

----------------------------------------

Le message est situé https://georezo.net/forum/viewtopic.php?pid=348099#p348099
Pour y répondre : webmapping(a)ml.georezo.net ou reply de votre messagerie
Pour vous désabonner connectez-vous sur le forum puis Profil / Abonnement

--

Association GeoRezo - le portail géomatique
https://georezo.net