Multiple instances of TimeSliderChoropleth on a single map (#1749)

* TimeSliderChoropleth: allow multiple

* fix behavior for show=False

* restore highlight option

* fix mypy

* better docstring

* update test

Author: Conengmo

folium/plugins/time_slider_choropleth.py

@@ -7,7 +7,10 @@
 
 class TimeSliderChoropleth(JSCSSMixin, Layer):
     """
-    Creates a TimeSliderChoropleth plugin to append into a map with Map.add_child.
+    Create a choropleth with a timeslider for timestamped data.
+
+    Visualize timestamped data, allowing users to view the choropleth at
+    different timestamps using a slider.
 
     Parameters
     ----------
@@ -16,6 +19,8 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
     styledict: dict
         A dictionary where the keys are the geojson feature ids and the values are
         dicts of `{time: style_options_dict}`
+    highlight: bool, default False
+        Whether to show a visual effect on mouse hover and click.
     name : string, default None
         The name of the Layer, as it will appear in LayerControls.
     overlay : bool, default False
@@ -34,65 +39,69 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
     _template = Template(
         """
         {% macro script(this, kwargs) %}
-            var timestamps = {{ this.timestamps|tojson }};
-            var styledict = {{ this.styledict|tojson }};
-            var current_timestamp = timestamps[{{ this.init_timestamp }}];
+        {
+            let timestamps = {{ this.timestamps|tojson }};
+            let styledict = {{ this.styledict|tojson }};
+            let current_timestamp = timestamps[{{ this.init_timestamp }}];
+
+            let slider_body = d3.select("body").insert("div", "div.folium-map")
+                .attr("id", "slider_{{ this.get_name() }}");
+            $("#slider_{{ this.get_name() }}").hide();
+            // insert time slider label
+            slider_body.append("output")
+                .attr("width", "100")
+                .style('font-size', '18px')
+                .style('text-align', 'center')
+                .style('font-weight', '500%')
+                .style('margin', '5px');
             // insert time slider
-            d3.select("body").insert("p", ":first-child").append("input")
+            slider_body.append("input")
                 .attr("type", "range")
                 .attr("width", "100px")
                 .attr("min", 0)
                 .attr("max", timestamps.length - 1)
                 .attr("value", {{ this.init_timestamp }})
-                .attr("id", "slider")
                 .attr("step", "1")
                 .style('align', 'center');
 
-            // insert time slider output BEFORE time slider (text on top of slider)
-            d3.select("body").insert("p", ":first-child").append("output")
-                .attr("width", "100")
-                .attr("id", "slider-value")
-                .style('font-size', '18px')
-                .style('text-align', 'center')
-                .style('font-weight', '500%');
-
-            var datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
-            d3.select("output#slider-value").text(datestring);
+            let datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
+            d3.select("#slider_{{ this.get_name() }} > output").text(datestring);
 
-            fill_map = function(){
+            let fill_map = function(){
                 for (var feature_id in styledict){
                     let style = styledict[feature_id]//[current_timestamp];
                     var fillColor = 'white';
                     var opacity = 0;
                     if (current_timestamp in style){
                         fillColor = style[current_timestamp]['color'];
                         opacity = style[current_timestamp]['opacity'];
-                        d3.selectAll('#feature-'+feature_id
+                        d3.selectAll('#{{ this.get_name() }}-feature-'+feature_id
                         ).attr('fill', fillColor)
                         .style('fill-opacity', opacity);
                     }
                 }
             }
 
-            d3.select("#slider").on("input", function() {
+            d3.select("#slider_{{ this.get_name() }} > input").on("input", function() {
                 current_timestamp = timestamps[this.value];
                 var datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
-                d3.select("output#slider-value").text(datestring);
+                d3.select("#slider_{{ this.get_name() }} > output").text(datestring);
                 fill_map();
             });
 
+            let onEachFeature;
             {% if this.highlight %}
-                {{this.get_name()}}_onEachFeature = function onEachFeature(feature, layer) {
+                 onEachFeature = function(feature, layer) {
                     layer.on({
                         mouseout: function(e) {
                         if (current_timestamp in styledict[e.target.feature.id]){
                             var opacity = styledict[e.target.feature.id][current_timestamp]['opacity'];
-                            d3.selectAll('#feature-'+e.target.feature.id).style('fill-opacity', opacity);
+                            d3.selectAll('#{{ this.get_name() }}-feature-'+e.target.feature.id).style('fill-opacity', opacity);
                         }
                     },
                         mouseover: function(e) {
                         if (current_timestamp in styledict[e.target.feature.id]){
-                            d3.selectAll('#feature-'+e.target.feature.id).style('fill-opacity', 1);
+                            d3.selectAll('#{{ this.get_name() }}-feature-'+e.target.feature.id).style('fill-opacity', 1);
                         }
                     },
                         click: function(e) {
@@ -103,8 +112,9 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
             {% endif %}
 
             var {{ this.get_name() }} = L.geoJson(
-                    {{ this.data|tojson }}
-            ).addTo({{ this._parent.get_name() }});
+                {{ this.data|tojson }},
+                {onEachFeature: onEachFeature}
+            );
 
             {{ this.get_name() }}.setStyle(function(feature) {
                 if (feature.properties.style !== undefined){
@@ -115,11 +125,13 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
                 }
             });
 
-            function onOverlayAdd(e) {
+            let onOverlayAdd = function(e) {
                 {{ this.get_name() }}.eachLayer(function (layer) {
-                    layer._path.id = 'feature-' + layer.feature.id;
+                    layer._path.id = '{{ this.get_name() }}-feature-' + layer.feature.id;
                 });
 
+                $("#slider_{{ this.get_name() }}").show();
+
                 d3.selectAll('path')
                 .attr('stroke', 'white')
                 .attr('stroke-width', 0.8)
@@ -128,13 +140,16 @@ class TimeSliderChoropleth(JSCSSMixin, Layer):
 
                 fill_map();
             }
-            {{ this._parent.get_name() }}.on('overlayadd', onOverlayAdd);
-
-            onOverlayAdd(); // fill map as layer is loaded
-
-            {%- if not this.show %}
-            {{ this.get_name() }}.remove();
+            {{ this.get_name() }}.on('add', onOverlayAdd);
+            {{ this.get_name() }}.on('remove', function() {
+                $("#slider_{{ this.get_name() }}").hide();
+            })
+
+            {%- if this.show %}
+            {{ this.get_name() }}.addTo({{ this._parent.get_name() }});
+            $("#slider_{{ this.get_name() }}").show();
             {%- endif %}
+        }
         {% endmacro %}
         """
     )
@@ -145,6 +160,7 @@ def __init__(
         self,
         data,
         styledict,
+        highlight: bool = False,
         name=None,
         overlay=True,
         control=True,
@@ -153,6 +169,7 @@ def __init__(
     ):
         super().__init__(name=name, overlay=overlay, control=control, show=show)
         self.data = GeoJson.process_data(GeoJson({}), data)
+        self.highlight = highlight
 
         if not isinstance(styledict, dict):
             raise ValueError(
@@ -165,13 +182,13 @@ def __init__(
                 )  # noqa
 
         # Make set of timestamps.
-        timestamps = set()
+        timestamps_set = set()
         for feature in styledict.values():
-            timestamps.update(set(feature.keys()))
+            timestamps_set.update(set(feature.keys()))
         try:
-            timestamps = sorted(timestamps, key=int)
+            timestamps = sorted(timestamps_set, key=int)
         except (TypeError, ValueError):
-            timestamps = sorted(timestamps)
+            timestamps = sorted(timestamps_set)
 
         self.timestamps = timestamps
         self.styledict = styledict

tests/plugins/test_time_slider_choropleth.py

@@ -81,9 +81,9 @@ def norm(col):
 
     # We verify that data has been inserted correctly
     expected_timestamps = sorted(dt_index, key=int)  # numeric sort
-    expected_timestamps = f"var timestamps = {expected_timestamps};"
+    expected_timestamps = f"let timestamps = {expected_timestamps};"
     expected_timestamps = expected_timestamps.split(";")[0].strip().replace("'", '"')
-    rendered_timestamps = rendered.split(";")[0].strip()
+    rendered_timestamps = rendered.strip(" \n{").split(";")[0].strip()
     assert expected_timestamps == rendered_timestamps
 
     expected_styledict = normalize(json.dumps(styledict, sort_keys=True))