-1

I have a map I'm working on with Leaflet that displays a choropleth of zip code-level data. One piece of functionality I would like to add is to allow users to use a range slider to filter out polygons (zip codes) based on some values of the associated metadata. In this case, each zip code in the GeoJson I'm using has a value for "sales" for that zip, and I would like users to be able to use the range slider to remove zip polygons that have fewer than the number of sales specified by the range slider.

I have seen some examples pointing to filtering using buttons, but nothing using a slider as described here.

I'm following this example, and instead of pointing the slider to datetime metadata within my geoJson, I'm pointing it to the "sales" attribute within properties. I'm able to filter out some zip codes using this, however the zip codes do not re-appear when sliding the filter all the way to the min and max values of the slider

Here's a link to an example I'm trying to apply this to using a choropleth of North Carolina. I currently have a slider implemented attempting to filter out counties in North Carolina based on the value in the geoJson field AWATER10 (I'm not sure what this field designates, but it's numeric and fits my needs). As you can see, as soon as the slider is moved, all the geometric county shapes are removed from the map permanently. Not sure how to remedy this. I've tried to comment my code to point readers to the areas where I've implemented the filtering functionality that currently does not work.

1

It looks like you've gotten thrown off track by the example you were following, which uses an old version (7.0.9) of the noUIslider library. The new version that you've included in your code (8.0.2) has different syntax for many operations, as described here. You should be able to get it working by changing one line, from

range = $("#slider").val();

to

range = slider.noUiSlider.get();

(and also re-applying your style to the filtered polygons as you re-add them)

Just tested this locally, and it appears to work.

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.