Several bugfixes && adds output for dispaying current value of slider
@@ -87,6 +87,7 @@ class TimeDynamicGeoJson(Layer):
self.styledict = styledict
+ # make set of timestamps
self.timestamps = set()
for feature in self.styledict.values():
self.timestamps.update(set(feature.keys()))
@@ -113,21 +114,29 @@ class TimeDynamicGeoJson(Layer):
var timestamps = {{ this.timestamps }};
var styledict = {{ this.styledict }};
+ var current_timestamp = timestamps[0];
- var current_timestamp; // TO DO: variable is used by the geojson mouseon/out setters in GeoJson
- // It is not really necessary, since it should be possible to get value from slider element directly
-
-
+ // insert time slider
d3.select("body").insert("p", ":first-child").append("input")
.attr("type", "range")
+ .attr("width", "100px")
.attr("min", 0)
.attr("max", timestamps.length - 1)
.attr("value", 0)
.attr("id", "slider")
- .attr("step", "1");
+ .attr("step", "1")
+ .style('align', 'center');
- current_timestamp = timestamps[0];
+ // 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);
fill_map = function(){
for (var feature_id in styledict){
@@ -137,18 +146,23 @@ class TimeDynamicGeoJson(Layer):
if (current_timestamp in style){
fillColor = style[current_timestamp]['color'];
opacity = style[current_timestamp]['opacity'];
- }
d3.selectAll('#feature-'+feature_id).attr('fill', fillColor).style('fill-opacity', opacity);
}
+
+ }
}
+
d3.select("#slider").on("input", function() {
current_timestamp = timestamps[this.value];
+ var datestring = new Date(parseInt(current_timestamp)*1000).toDateString();
+ d3.select("output#slider-value").text(datestring);
fill_map();
});
+
{% if this.highlight %}
{{this.get_name()}}_onEachFeature = function onEachFeature(feature, layer) {
layer.on({
@@ -164,7 +178,7 @@ class TimeDynamicGeoJson(Layer):
}
},
click: function(e) {
- map_b8f7044de0124208b3f693137000f0b4.fitBounds(e.target.getBounds());
+ {{this._parent.get_name()}}.fitBounds(e.target.getBounds());
}
});
};
@@ -196,12 +210,11 @@ class TimeDynamicGeoJson(Layer):
{{ this.get_name() }}.eachLayer(function (layer) {
- layer._path.id = 'feature-' + layer.feature.properties.id;
+ layer._path.id = 'feature-' + layer.feature.id;
});
-
+ d3.selectAll('path').attr('stroke', 'white').attr('stroke-width', 0.8).attr('stroke-dasharray', '5,5').attr('fill-opacity', 0);
fill_map();
- d3.selectAll('path').attr('stroke', 'white').attr('stroke-width', 0.8).attr('stroke-dasharray', '5,5')
{% endmacro %}
