Hello community,
I want to make a timeslider with a Heatmap made from a featureLayer that i have in my rest service but i wanna know if somebody has made anything similar or how is the proper way to do it.
I have this for makin the heatmap and it works, but i want to make a timeslider with it.
var serviceUrl = "myserver/MapServer/1?f=json&token=" + resolve;
var heatmapFeatureLayerOptions = {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
};
var heatmapFeatureLayer = new FeatureLayer(serviceUrl, heatmapFeatureLayerOptions);
var heatmapRenderer = new HeatmapRenderer({
colors: ["rgba(0,255,0, 0)","rgb(255, 255, 0)","rgb(255, 0, 0)"],
blurRadius: 16,
maxPixelIntensity: 250,
minPixelIntensity: 5
});
heatmapFeatureLayer.setRenderer(heatmapRenderer);
map.addLayer(heatmapFeatureLayer);
I already know that the feature service has to have the timeextent setted up in the service, but how can i make a timeslider that shows this heatmap made?
Thanks in advice! Any example will be really appreciated!
Solved! Go to Solution.
Nevermind, i realize a way to do it. I just add this to my code.
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("1/1/2000 UTC");
timeExtent.endTime = new Date("12/31/2009 UTC");
timeSlider.setThumbCount(1);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");
timeSlider.setThumbIndexes([0,1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
if ( i % 2 === 0 ) {
return timeStop.getUTCFullYear();
} else {
return "";
}
});
timeSlider.setLabels(labels);
timeSlider.on("time-extent-change", function(evt) {
var startValString = evt.startTime.getUTCFullYear();
var endValString = evt.endTime.getUTCFullYear();
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
});
timeSlider.loop=true;
Nevermind, i realize a way to do it. I just add this to my code.
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("1/1/2000 UTC");
timeExtent.endTime = new Date("12/31/2009 UTC");
timeSlider.setThumbCount(1);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsYears");
timeSlider.setThumbIndexes([0,1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
if ( i % 2 === 0 ) {
return timeStop.getUTCFullYear();
} else {
return "";
}
});
timeSlider.setLabels(labels);
timeSlider.on("time-extent-change", function(evt) {
var startValString = evt.startTime.getUTCFullYear();
var endValString = evt.endTime.getUTCFullYear();
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
});
timeSlider.loop=true;