0

i'm trying to show only a certain feature from my Vector Source. so i make a function like this:

function showUtility(id) {
        utilitiesSource.forEach(function(i) {
            //console.log(i.getFeatures());
            i.forEachFeature(function(f) {
                if (f.getProperties().id == id) {
                    f.setStyle(null);
                } else {
                    f.setStyle([]);
                }
            });
        });
}

where the utilitiesSource comes from:

utilitiesSource = [];

var utilitySource = new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                projection: 'EPSG:4326',
                url: 'someUrl',
                extractStyles: false
        });

utilitiesSource.push(utilitySource);

the problem is console.log(i.getFeatures()) in showUtility() always gives empty array although it's fine if i was using it in an eventlistener like these:

    var selectCtrl = new ol.control.Select({
        source: utilitiesSource,
        property: $(".options select").val(),
        selectLabel: 'Cari',
        addLabel: 'Tambah Kondisi',
        allLabel: 'Cocokkan Semua',
        attrPlaceHolder: 'atribut',
        valuePlaceHolder: 'nilai'
    });

 selectCtrl.on('select', function(e) {
        select.getFeatures().clear();
        utilitiesSource.forEach(function(i) {
            //console.log(i.getFeatures()); --> gives array of feature
            i.forEachFeature(function(f) {
                f.setStyle([]);
            });
        })
        e.features.forEach(function(f) {
            f.setStyle(null);
        });
    });

    var bar = new ol.control.Bar({ 
      group: true,
      controls: [
        selectCtrl,
        new ol.control.Button({
          html: '<i class="fa fa-undo" ></i>',
          title: 'Reset',
          handleClick: function() {
            select.getFeatures().clear();
            utilitiesSource.forEach(function(i) {
                //console.log(i.getFeatures()); --> gives array of feature
                i.getFeatures().forEach(function(f) {
                    f.setStyle(null);
                });
            })
          }
        })
     ]});

and if i use browser's console and execute utilitiesSource.forEach(function(i) { i.getFeatures().forEach(function(j){ if (j.getProperties().id == 100) {j.setStyle(null);} else {j.setStyle([])} });}); i get what i want

why is that? why can't i get the features in showUtility(id)?

Bang Fady
  • 151
  • 2
  • 13
  • 2
    Are you sure that vector sources have loaded their features when you call the `showUtility(id)` method? – pavlos Mar 15 '19 at 07:37
  • i'm sure, my layers which source is the utilitiesSource's content showing perfectly. i also have tried call the function in the last row of my code, but still no luck – Bang Fady Mar 15 '19 at 12:15
  • 1
    How can you be sure that all of your sources has been loaded successfully. This is an asynchronous task and has nothing to do with calling your code at last line. – pavlos Mar 15 '19 at 13:29
  • sorry, i didn't know it was asynchronous task and i was sure because my layers shows features from that source just fine. so, should i use getState() or on('render' ,function()) ? – Bang Fady Mar 15 '19 at 14:00
  • First of all try to call your function once you see all vectors in your map , just to make sure that this is your problem. And then yes you need call `vectorSource.on('change', function(e) { if (vectorSource.getState() == 'ready') { ...call your method....` – pavlos Mar 15 '19 at 14:57
  • ah, you're right, the vector sources in utilitiesSource gives empty array because it wasn't ready when i called it. so i fix my code like this : `utilitiesSource.forEach(function(i) { i.on('change', function(e) { if (i.getState() == 'ready') { i.forEachFeature(function(f) { f.setStyle([]); }); } }); });` but, why is it gives `Uncaught RangeError: Maximum call stack size exceeded` ? – Bang Fady Mar 16 '19 at 00:46
  • Your code may be in a loop if making changes to features causes another change event in the source. A better event to use might be addfeature `i.on('addfeature', function(e) { e.feature.setStyle([]); });` – Mike Mar 16 '19 at 12:51
  • How many sources do you add on your map? This sounds a recursive problem. Can you make a fiddle to demonstrate your case? It is hard to identify your problem as long as we dont have the full image of your case. – pavlos Mar 18 '19 at 08:51
  • @Mike thanks so much, it worked. yay! – Bang Fady Mar 18 '19 at 12:12
  • @pavlos only 16. yeah, i also thought it was a recursive problem. but i didn't call a function inside it's own function. so, i don't know why it was recursive. the error pops out when i called `f.setStyle([])`, because if i replace it with console.log, no error shown – Bang Fady Mar 18 '19 at 12:17
  • anyway @pavlos you should put your answer in the Answer section so i can mark it as answer – Bang Fady Mar 18 '19 at 13:32
  • Glad you found your way out. No need for amenities , thanks anyway. – pavlos Mar 18 '19 at 13:59

0 Answers0