title: Using a jquery slider to display leaflet circle markers?
body: <p>[EDIT] I've modified this question to reflect the current status of my problem.</p>
  
  <p>I'm working on visualizing some spatial data that varies over time. I'm using Leaflet and I have the data in a GeoJSON. I'd like to have my map include a slider that enables the user to dynamically display markers based on time. </p>
  
  <p>[EDIT] <s>I've tried to work with <a href="https://github.com/dwilhelm89/LeafletSlider" rel="nofollow">this</a> implementation. However, this only displays standard Leaflet markers and I need to be able to display circle markers that can be dynamically styled based on properties specified within the geojson.</s></p>
  
  <p>Styling the geojson and converting to leaflet circle markers works as expected using the following code:</p>
  
  <pre><code>var geojson = L.geoJson(data, {
  style: myStyle,
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng)
  }   
  })
  </code></pre>
  
  <p>With <code>myStyle</code> and <code>onEachFeature</code> handling the conversion to L.circleMarker and generating tooltips. </p>
  
  <p>However, the issue I'm now dealing with is that the resulting slider adds each feature one at a time rather than as a group. Currently I have a geojson with approx. 600 features and 4 distinct time points (e.g. subgroups of 150 features that each have the same time stamp). What I want is for each group of 150 to be added simultaneously. Currently the slider iterates over each feature in the geojson and adds them one at a time. </p>
  
  <p>Here is the code for the slider from Dennis Wilhelm's <a href="https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js" rel="nofollow">LeafletSlider</a> that I am using:</p>
  
  <pre><code>startSlider: function () {
          options = this.options;
          $("#leaflet-slider").slider({
              value: options.minValue + 1,
              min: options.minValue,
              max: options.maxValue +1,
              step: 1,
              slide: function (e, ui) {
                  if(!!options.markers[ui.value]) {
                  if(options.markers[ui.value]) $('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 16));
  
                  for (var i = options.minValue; i &lt; ui.value ; i++) {
                      if(options.markers[i]) map.addLayer(options.markers[i]);
                  }
                  for (var i = ui.value; i &lt;= options.maxValue; i++) {
                      if(options.markers[i]) map.removeLayer(options.markers[i]);
                  }
              }
          }
      });
      map.addLayer(options.markers[options.minValue]);
  }
  </code></pre>
  
  <p>What is unclear to me is if I need to modify this slider function to place these features in a feature group and if so, how to do so. I'm relatively new to javascript, so if someone can point me to some useful starting points, I would be most appreciative.</p>