Filtering Leaflet data with a slider

Here, a jQRangeSlider is used to filter GeoJSON data dynamically based on a numerical property (year). The GeoJSON data are created with a quasi-normal spatial distribution, filtered, then displayed as circle markers on a Leaflet map. Because the data are filtered and re-displayed every time the slider is moved, performance is rather slow. This can be alleviated by replacing "valuesChanging" with "valuesChanged" in the slider filter binding (line 257).

by msjade

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://ghusse.github.io/jQRangeSlider/stable/css/classic.css">
<script src="https://biojs.googlecode.com/svn-history/r546/trunk/src/main/resources/dependencies/jquery/jQRangeSlider-5.1/jQRangeSlider-withRuler-min.js"></script>
<div id="map"></div>
<br />
<br />
<div class="sliderContainer">
    <div id="dotSlider"></div>
</div>

CSS

html, body, #map {
      height: calc(100% - 30px);
      width:100%;
      padding:0px;
      margin:0px;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      color: #333;
   } 
.sliderContainer {
    margin: 0 50px;
}
.dotLegend {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display:inline-block;
   
}
.dotColor{
    background: #20a0ff;
}
.gdotColor{
    background: #40b060;
}

JavaScript

//////////////////////////////////////////////////////////////////////////////////////////////
//Here, a jQRangeSlider is used to filter GeoJSON data dynamically based on a numerical 
//property (year). The GeoJSON data are created with a quasi-normal spatial distribution, 
//filtered, then displayed as circle markers on a Leaflet map. 
//////////////////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
//////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var map = L.map( 'map', {
  center: [9.401, 7.407],
  minZoom: 6,
  zoom: 2
});

L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 subdomains: ['a','b','c']
}).addTo( map );

 
// set source for map tiles


//var CDB_URL = L.tilelayer('https://api.mapbox.com/styles/v1/msjade/cjlqok9is8wxa2sn1wh7sxz1i/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXNqYWRlIiwiYSI6ImNpdW4xdjJ4ZDAwMHMyb29lamt4emJoOTkifQ.rISPCIE5NKs_Qmhhgd9-3g').addTo(map);

// add tiles to map
//L.tileLayer(CDB_URL).addTo(map);

//////////////////////////////////////////////////////////////////////////////////////////////
//creating the data//
//////////////////////////////////////////////////////////////////////////////////////////////

//initialize
var dotlayer;
var dots;
var dotcount = 200;

var gdotlayer;
var gdots;
var gdotcount = 75;

//cheapo normrand function
function normish(mean, range) {
    var num_out = ((Math.random() + Math.random() + Math.random() + Math.random() - 2) / 2) * range + mean;
    return num_out;
}

//create geojson data with random ~normal distribution
function make_dots() {

    dots = {
        type: "FeatureCollection",
        features: []
    };

    for(var i=0;i<dotcount;++i) {

        //set...