1

I want to make dynamic filter on Leaflet, but I got a little problem. so first this my dropdown:

<select id="selc">
<option value="baik">baik</option>
<option value="sedang">sedang</option>
<option value="berat">berat</option>
</select>

and this my filter:

filter: function(feature, layer) {   
    <?php
    $asa = $this->db->query("SELECT du_kode,du_kondisi FROM data_umum inner join data_umum_head on data_umum.duh_id=data_umum_head.duh_id where data_umum_head.maplink_id = '$ml->maplink_id'")->result();
    foreach($asa as $dew){ ?>
        woe = <?= $dew->du_kode?>;
        if(feature.properties.ID==woe){
        wawa = '<?= $dew->du_kondisi?>';

        $('#selc').on('change', function() {                         
        console.log($('#selc').val(),feature.properties.ID,wawa);
        if(wawa == $('#selc').val()){
            return (feature.properties.ID)
            }
        });
      } 
<?php } ?>
},

My problem is why my on.change is not working to return (feature.properties.ID)

enter image description here

but if I do manually and change the code like this

filter: function(feature, layer) {   
<?php
    $asa = $this->db->query("
    SELECT du_kode,du_kondisi FROM data_umum 
    inner join data_umum_head on 
    data_umum.duh_id=data_umum_head.duh_id where 
    data_umum_head.maplink_id = '$ml->maplink_id'")->result();
                        foreach($asa as $dew){ ?>
                            woe = '<?= $dew->du_kode?>';
                            if(feature.properties.ID==woe){
                                wawa = '<?= $dew->du_kondisi?>';
                                /*$('#selc').on('change', function() {
                console.log($('#selc').val(),feature.properties.ID,wawa);
                                    if(wawa == $('#selc').val()){
                                        return (feature.properties.ID)
                                    }
                                });
                                */
                                console.log(wawa);
                                if(wawa == 'berat'){
                                    return (feature.properties.ID)
                                }

                            } 

                        <?php } ?>
                    },

and my results be like this enter image description here

This is the result I expected, but how can I use it with onchange?

0

If you look in the Leaflet documentation https://leafletjs.com/reference-1.5.0.html#geojson, you will se the following remark for the filter option of L.geoJSON layer creation method:

Note: dynamically changing the filter option will have effect only on newly added data. It will not re-evaluate already included features.

  • I only want to create a filter using the select option, so if I choose A, then B, C, and others must be hidden – AdityaDS Nov 15 at 14:44
  • You can create a featurelayer and when the control changes clearlayer, and add the new data to the featurelayer. Something .like this gistechsolutions.com/leaflet/DEMO/filter/filter.html – Bill Chappell Nov 15 at 15:24
  • Question was about filter not working and this question was answered. If you have another question of how to do it without filter, then put up a new question. – TomazicM Nov 15 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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