0

Trying to implement a time range control in some point on a Leaflet map.

I tried to defined the Max and Min values, as a GeoJSON layer already open in the map 'todos_os_pontos'. Then I tried select (filter) those who were true in between the Max and Min values. And then I tried to put them in 'pontos_mapa'

There is some problem with the .addData(), telling me:

pontosVisiveis.addData is not a function

Here is my code:

       /*Seletor de fotos*/
    var range1 = document.getElementById('range1');
    var range2 = document.getElementById('range2');
    
    range1.addEventListener('input', updateSlider);
    range2.addEventListener('input', updateSlider);
    var lastinterval=150
    
    function updateSlider() {
        //controlo dos ranges
        var minValue = parseInt(range1.value);
        var maxValue = parseInt(range2.value);
        var interval
        
        
        interval = maxValue - minValue 
    
        if (minValue >= maxValue) {
            range1.value = maxValue - 10;
            minValue = parseInt(range1.value); // Atualiza o valor mínimo após a modificação
        } 
    
        console.log('Min Value:', range1.value,'Max Value:', range2.value,'Intervalo', range2.value-range1.value);
    
        //preparacao dos pontos da da função
        const todos_os_pontos = ponto_foto;
        console.log('todos os pontos',todos_os_pontos);
        var pontosVisiveis = todos_os_pontos;
        console.log('pontos visiveis',pontosVisiveis);
    
        pontosVisiveis.clearLayers();
        console.log('limpou',pontosVisiveis);
    
        pontosVisiveis = todos_os_pontos.toGeoJSON().features.filter(feature => {
            var dataFoto = feature.properties.data_antiga; // Assumindo que 'data_antiga' é a propriedade que contém a data da foto
            return dataFoto >= minValue && dataFoto <= maxValue;
        });
    
        var pontos_mapa = pontosVisiveis.addData({
            type: "FeatureCollection",
            name:"Pontos Filtrados",
            crs: { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
            features: pontosVisiveis});
    
        console.log('no mapa', pontos_mapa);
    
        //Repor o valor do ultimo intervalo
        lastinterval = interval
        console.log(lastinterval)
    };

1 Answer 1

0

When creating filtered features you are assigning them to pontosVisiveis which previously contained GeoJSON layer:

pontosVisiveis = todos_os_pontos.toGeoJSON().features.filter(feature => {
    var dataFoto = feature.properties.data_antiga; // Assumindo que 'data_antiga' é a propriedade que contém a data da foto
    return dataFoto >= minValue && dataFoto <= maxValue;
});

As a consequence pontosVisiveis.addData(...) of course can't work.

Just assign filtered features to a different variable and then use is when adding features to the layer:

const filteredFeatures = todos_os_pontos.toGeoJSON().features.filter(feature => {
    var dataFoto = feature.properties.data_antiga; // Assumindo que 'data_antiga' é a propriedade que contém a data da foto
    return dataFoto >= minValue && dataFoto <= maxValue;
});

var pontos_mapa = pontosVisiveis.addData({
  type: "FeatureCollection",
  name:"Pontos Filtrados",
  crs: {
    "type": "name",
    "properties": {
      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
    }
  },
  features: filteredFeatures
});
6
  • So, now the last variable aparently doenst do anything. It should update the map, but all the points dissapear. Also, now there's none error in the console
    – PedroMTG
    Oct 25, 2023 at 12:26
  • even using this after (with the console telling that Invalid GeoJSON object. var filteredLayer = L.geoJSON(pontos_mapa); filteredLayer.addTo(map);
    – PedroMTG
    Oct 25, 2023 at 12:32
  • Do you get anything with console.log(filteredFeatures)?
    – TomazicM
    Oct 25, 2023 at 13:37
  • An empty Array[] only
    – PedroMTG
    Oct 25, 2023 at 18:00
  • That tells you there is something wrong with your filtering or that filtering conditions are such that give no result.
    – TomazicM
    Oct 25, 2023 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.