1

Good afternoon, I am trying to filter my geoJSON layer based on those properties:

    <div class="box yellow" ></div><input type="checkbox" id="infill" name="infill" checked> Infill<br>
                            <select class="selection">
                                <option id="total" value="total">All</option>
                                <option id="completed" value="completed">Completed</option>
                            </select><br>

where my .geojson file looks as follows:

  {
  "type": "Feature",
  "properties": {
    "Owner": 174556,
    "Type": "Infill",
    "Status": "Completed_and_invoiced",
    "Ticket_ID": "VM/TIK/808571",
    "NBU": 174556,
    "Address": "70 Lackford Ave",
    "Postcode": "SO40 ",
    "Date_issued_from_VM": "",
    "Asbestos_rep": "N/A",
    "Planner": "Richard Dean",
    "Surveyor": "Richard Dean",
    "STATS_Applied_for_date": "N/A",
    "STATS_compleeted": "N/A",
    "ACTUAL_Internal_QC_Date": "Wednesday, May 29, 2019",
    "VM_ECD_date": "",
    "Client_Home_Count": 370,
    "Post_Survey_Home_Count": 370,
    "General_notes": "Emailed Elec on 9.5 - AJ to chase 13.05",
    "Directory": "file://Z:\\\\Fixed Line\\\\Design & Build\\\\2. 
    Clients\\\\Virgin Media\\\\1. Small Infill Projects\\\\2. NBUs\\\\NBU 
    174556 Southampton",
    "Sharepoint": ""
    },

And the code looks as follows:

    var url = 'json/vm2.json';  // Here is the url path to my GeoJSON file, 


     function getColor(Type){   //layer 2 Virgin Media
     return Type == 'Infill' ? 'yellow' :
   Type == 'MDU' ? 'orange' :
                        'orange';
      }    
      function style(feature) {
      if (feature.properties.Type === "MDU" && 
      feature.properties.Post_Survey_Home_Count === "")
      return{
      fillColor: '#d4a270',
      fillOpacity: '#d4a270',
     weight: 0.5
      }
     if (feature.properties.Type === "Infill" && 
     feature.properties.Post_Survey_Home_Count === "")   
     return{
     fillColor: '#efefa9',
     fillOpacity: '#efefa9',
     weight: 0.5
     }
   else
   return {
      fillColor: getColor(feature.properties.Type),
      fillOpacity: 1,
     weight: 2,
opacity: 0.75,
//color: '#ffffff',
//dashArray: '3'
};

}

  var infill; 
  var mdu;    

    $.when(
$.getJSON(url),
).done (function(data) {

infill = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "Infill" );
        }
        })//.addTo(map);  //Note turned on to start map with Data, Checkbox has checked property.

   mdu = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {

        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        //color: "#000",
        color:getColor(feature.properties.Type),
        fillColor: getColor(feature.properties.Type),
        fillOpacity: 0.8

        }).bindTooltip(feature.properties.Owner);
    },
        onEachFeature: function (feature, layer) {
        },
        filter: function(feature, layer) {   
            return (feature.properties.Type == "MDU" );
        }
        })//.addTo(map);
});

      // Handles the check boxes being turned on/off
     document.querySelector("input[name=infill]").addEventListener('change', 
    function() {
        if(this.checked) map.addLayer(infill)
          else map.removeLayer(infill)
            if (clickmark != undefined) {  //i.e. if it exists...
            //function all to remove the yellow select circle, could call function to clear table from here.
                map.removeLayer(clickmark);
            };
        })

  document.querySelector("input[name=mdu]").addEventListener('change', 
  function() {
        if(this.checked) map.addLayer(mdu)
          else map.removeLayer(mdu)
            if (clickmark != undefined) {
                map.removeLayer(clickmark);
            };
        })
      //2nd Layer in map


     // click marker
     var clickmark;

     // When you click on a circle, it calls the onMapClick function and passes the layers coordinates.
     // I grab the coords which are X,Y, and I need to flip them to latLng for a marker,  
     function onMapClick(coords) {
    //console.log(coords);
    var thecoords = coords.toString().split(',');
    var lat = thecoords[1];
    var lng = thecoords[0];
    //if prior marker exists, remove it.
    if (clickmark != undefined) {
      map.removeLayer(clickmark);
    };

     clickmark = L.circleMarker([lat,lng],{
        radius: 8,
        color: "yellow",
        fillColor:  "yellow",
        fillOpacity: 0.8}
     ).addTo(map);
}



      //If Radio Button one is clicked.  
document.getElementById("total").addEventListener('click', function(event) {
theExpression = L.geoJson(data);
console.log(theExpression); 
    });

$.getJSON(url, function(data) {
           mdu.addData(data);
    });

var myData =  L.layerGroup([]);
    myData.addLayer(mdu);
    myData.addTo(map); 

document.getElementById("completed").addEventListener('click', function(event) {
theExpression = 'feature.properties.Status == "Completed_and_invoiced"';    
console.log(theExpression);
    map.removeLayer(myData);
    myData.clearLayers();

    mdu = L.geoJson(null, {

        pointToLayer: function(feature, latlng) {

            return L.circleMarker(latlng, {
                color:'black',
                fillColor:  'green',
                fillOpacity: 1,
                radius: 8
            })
        },  
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.Status);
        },
        filter: function(feature, layer) {   
             return (feature.properties.Status == "Completed_and_invoiced" );
        },

    });

$.getJSON(url, function(data) {
           mdu.addData(data);
    });

    myData.addLayer(mdu);
    myData.addTo(map);
});

All my layers are gone as per in the image below:

enter image description here

My console says:

Util.js:59 Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at stamp (Util.js:59) at NewClass.getLayerId (LayerGroup.js:149) at NewClass.addLayer (LayerGroup.js:42) at (index):318

The example comes from here:

http://www.gistechsolutions.com/leaflet/DEMO/filter/filter.html

Shall I try sth like this? GeoJSON filtering based on properties not working

or this?

http://bl.ocks.org/zross/47760925fcb1643b4225 however this example looks quite different.

Your Answer

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

Browse other questions tagged or ask your own question.