topic How to make a timeslider with heatmap from featureLayer in ArcGIS JavaScript Maps SDK Questions

How to make a timeslider with heatmap from featureLayer

EvelynHernandez — Sun, 12 Dec 2021 05:36:47 GMT

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!

Re: How to make a timeslider with heatmap from featureLayer

EvelynHernandez — Sun, 12 Dec 2021 05:36:49 GMT

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;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍