Prevent plotting scaled point with zero value, Mapbox, leaflet

Question

I'm making a bubble map with Mapbox js.

The problem is: I'm trying to stop points appearing if they are below a certain value. Currently values of 0 appear.

The function that sets the points looks like this. I've commented out an if statement that was unsuccessful.

function layer(selecta){ 
    geoJson = L.geoJson(geoJsonData, {
        pointToLayer: function(feature, latlng) {
            return L.circleMarker(latlng, {
                color: '#c10000',
                  //    if (parseInt(feature.properties[selecta]) < 50000){
                radius: (Math.sqrt(feature.properties[selecta] / 3.141592) / 50)  
                  //    }
            }).bindPopup('<h3>' + feature.properties.country + '</h3><p>' + 'Refugees, asylum seekers and IDPs in ' + currentYear + ': ' + numeral(feature.properties['yr' + currentYear]).format('0,0') + '</p>',{
                closeButton: true,
                minWidth: 320
            });
        }
    }).addTo(map);

};
layer('yr2013'); 

The data is loaded from a geoJSON file, which is an array of objects. Every object has properties for each year. Eg.

  {  
     "type":"Feature",
     "geometry":{  
        "type":"Point",
        "coordinates":[  
           64.585262,
           41.377491
        ]
     },
     "properties":{  
        "country":"Uzbekistan",
        "yr2000":"39598",
        "yr2001":"40923",
        "yr2002":"46014",
        "yr2003":"45653",
        "yr2004":"44932",
        "yr2005":"44537",
        "yr2006":"1422",
        "yr2007":"1060",
        "yr2008":"821",
        "yr2009":"555",
        "yr2010":"311",
        "yr2011":"214",
        //"yr2012":"176",
        //"yr2013":"138"
     }
  },

If I get rid of the values that have a value below 200, like the above example, this returns an error in the console. The points still display, but it's a massive hack.

Can someone please tell me a cleaner way of doing this?

X EDIT X I never did find a solution, but I ended up finding a work-around.

Leaflet has CircleMarker options opacity and fillOpacity.

Here's the docs

So I made a function that returns zero if the value is too small, so that the marker will not appear.

It is still technically there though.

Answer 1

How about this:

function layer(selecta){ 
    geoJson = L.geoJson(geoJsonData, {
        pointToLayer: function(feature, latlng) {

            //I suppose this is an integer
            var number_refugees = numeral(feature.properties['yr' + currentYear]);

            if(number_refugees > 0){
                var popup_content = '<h3>' + feature.properties.country + '</h3>'
                    + '<p>' + 'Refugees, asylum seekers and IDPs in ' + currentYear + ': '
                    + number_refugees.format('0,0') + '</p>';

                return L.circleMarker(latlng, {
                    color: '#c10000',
                    radius: (Math.sqrt(feature.properties[selecta] / 3.141592) / 50)  
                }).bindPopup(popup_content),{
                    closeButton: true,
                    minWidth: 320
                });
            }
        }
    }).addTo(map);
};
layer('yr2013');

Answer 2

Have you tried using Mapbox.js's .setFilter()? It should remove the features you don't want rather than just making them transparent.

https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-multiple-filters/