1

Regarding to the following queries

https://stackoverflow.com/questions/59141456/leaflet-problem-with-filtering-the-geojson-layers

GeoJSON filtering based on properties in Leaflet not working

I thought about something like multiple filtration by GeoJSON properties in Leaflet.

Regarding to this I used the following code snippet:

      filter: function(feature, layer) {   
            return {
            (feature.properties.Type == "MDU" );
            }
           }

which filters my GeoJSON feature property.

The problem is, that despite an existing filter option by Type, I would like to make the same filtering for property Status. This is another feature, which must be filtered inside the 1st one being already filtered.

enter image description here

So my attepts were:

     filter: function(feature, layer) {   
            return {
            (feature.properties.Type == "MDU" )
            (feature.properties.Status == "Completed_and_invoiced" );
            }
           }

and

     filter: function(feature, layer) {   
            return {
            feature.properties.Type == "MDU",
            feature.properties.Status == "Completed_and_invoiced"
            }
        }

None of them works. The console after the 2nd one says:

Uncaught SyntaxError: Unexpected token '.'

which is not true, because it refers to the

feature.properties.Status == "Completed_and_invoiced"

and must be there. The major example comes from here:

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

This is the thing, that I am the most interested in.

However I found something slightly different here:

Leaflet : filter with condition

https://stackoverflow.com/questions/16148598/leaflet-update-geojson-filter

which requires set some condition

and here:

https://blogs.kent.ac.uk/websolutions/2015/01/29/filtering-map-markers-with-leaflet-js-a-brief-technical-overview/

https://www.youtube.com/watch?v=rbnlnXIT4eI

This option seems to be interesting:

Multiple on-the-fly filtering based on markers' features on leaflet

although it looks like it refers still for 1-level filtering as per above.

Is it possible to expand the pointToLayer function filter for more than 1 return?

UPDATE:

The another way I tried is:

  mdu = L.geoJson(data, {   //1st level geoJSON filteration

    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);


        mducompleted = L.geoJson(mdu, {    // 2nd level of geoJSON filteration

    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.Status == "Completed_and_invoiced" );
        }
        }).addTo(map);

The mducompleted layer not exist on the map, whereas the console says:

DivOverlay.js:173 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at NewClass._updateContent (DivOverlay.js:173) at NewClass.update (DivOverlay.js:116) at NewClass.onAdd (DivOverlay.js:53) at NewClass.onAdd (Tooltip.js:71) at NewClass._layerAdd (Layer.js:110) at NewClass.whenReady (Map.js:1411) at NewClass.addLayer (Layer.js:172) at NewClass.openTooltip (Tooltip.js:221) at NewClass.openTooltip (Tooltip.js:340) at NewClass._openTooltip (Tooltip.js:406)

0

In your first two listed attempts for the "filter" function, I would try excluding/removing the curly braces and use a logical AND (&&) operator between both conditionals...

(feature.properties.Type == "MDU" ) && (feature.properties.Status == "Completed_and_invoiced" )

Make sure to enclose these two conditional statements within parentheses. (Side note: why not use Strict comparison operator, ===).

As well, if errors are appearing using '.' dot syntax, try enclosing the child members in brackets...

feature["properties"]["Type"] == "MDU" 

Hope you find an answer!

  • Ok, thank you. I will try first thing in the morning. Just another quick query. How about if I will have about 5 another feature.properties.Status types? Is it possible to write them within one layer and stick to this example: gistechsolutions.com/leaflet/DEMO/filter/filter.html or shall create 5 separate layers with unique geoJSON properties and then bind them together? – Mariusz Krukar Dec 3 at 19:37

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.