quooston/TimeSlider

## TimeSlider
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!--
     ArcGIS API for JavaScript, https://js.arcgis.com
     For more information about the visualization-heatmap sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap/
     -->
  <title>
    Visualize points with a heatmap | Sample | ArcGIS API for JavaScript 4.24
  </title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 90%;
      width: 100%;
    }
  </style>

  <script src="https://js.arcgis.com/4.24/"></script>

</head>

<body>
  <div id="viewDiv"></div>
  <div id="actionsDiv">
    <button id="btnData">Moaaar</button>
  </div>

  <script>
    require([
      "esri/Map",
      "esri/layers/GeoJSONLayer",
      "esri/views/MapView",
      "esri/widgets/TimeSlider",
      "esri/smartMapping/renderers/heatmap"
    ], (Map, GeoJSONLayer, MapView, TimeSlider, heatmapRendererCreator) => {

      const url =
        "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson";

      // The heatmap renderer assigns each pixel in the view with
      // an intensity value. The ratio of that intensity value
      // to the maxPixel intensity is used to assign a color
      // from the continuous color ramp in the colorStops property

      const renderer = {
        type: "heatmap",
        colorStops: [
          { color: "rgba(63, 40, 102, 0)", ratio: 0 },
          { color: "#472b77", ratio: 0.083 },
          { color: "#4e2d87", ratio: 0.166 },
          { color: "#563098", ratio: 0.249 },
          { color: "#5d32a8", ratio: 0.332 },
          { color: "#6735be", ratio: 0.415 },
          { color: "#7139d4", ratio: 0.498 },
          { color: "#7b3ce9", ratio: 0.581 },
          { color: "#853fff", ratio: 0.664 },
          { color: "#a46fbf", ratio: 0.747 },
          { color: "#c29f80", ratio: 0.83 },
          { color: "#e0cf40", ratio: 0.913 },
          { color: "#ffff00", ratio: 1 }
        ],
        maxDensity: 0.01,
        minDensity: 0
      };

      const map = new Map({
        basemap: "gray-vector"
      });

      const view = new MapView({
        container: "viewDiv",
        center: [-138, 30],
        zoom: 2,
        map: map
      });

      let dataPoints = [];
      let timeSlider = null;
      let layer = null;

      function moaarData() {
        fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson")
          .then((response) => response.json())
          .then((data) => {
            const slice = data.features.slice(dataPoints.length, dataPoints.length + 20);
            dataPoints = [...dataPoints, ...slice];

            console.log(dataPoints);

            showTimeSlider();
          });
      }

      function showTimeSlider() {
        if (layer) {
          map.remove(layer);
          layer.destroy();
          layer = null;
        }

        if (timeSlider) {
          timeSlider.destroy();
          timeSlider = null;
        }

        const geoJSON = {
          type: "FeatureCollection",
          features: dataPoints.map(t => {
            return {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: t.geometry.coordinates
              },
              properties: {
                identifier: t.id,
                mag: t.properties.mag,
                time: t.properties.time
              }
            }
          }),
        };

        const blob = new Blob([JSON.stringify(geoJSON)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        layer = new GeoJSONLayer({
          url: url,
          title: "Magnitude 2.5+ earthquakes from the last week",
          copyright: "USGS Earthquakes",
          timeInfo: {
            startField: "time", // name of the date field
            interval: {
              // set time interval to one day
              unit: "days",
              value: 1
            }
          }
        });

        let heatmapParams = {
          layer: layer,
          view: view
        };

        // time slider widget initialization
        timeSlider = new TimeSlider({
          loop: true
        });

        view.ui.add(timeSlider, "bottom-left");

        heatmapRendererCreator.createRenderer(heatmapParams)
          .then(response => {
            layer.renderer = response.renderer;

            view.whenLayerView(layer).then((layerView) => {
              timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;

              let end = new Date(layer.timeInfo.fullTimeExtent.start);
              end.setDate(end.getDate() + 1);
              timeSlider.timeExtent = {
                start: layer.timeInfo.fullTimeExtent.start,
                end
              };

              //timeSlider.fullTimeExtent = mobHeatmapLayer.timeInfo.fullTimeExtent.expandTo('hours');
              //timeSlider.timeExtent = getTimeExtentForTimeSlider(telemetryData);

              timeSlider.play();
            });
          });

        // watch for time slider timeExtent change
        timeSlider.watch("timeExtent", () => {
          // only show earthquakes happened up until the end of
          // timeSlider's current time extent.
          layer.definitionExpression =
            "time <= " + timeSlider.timeExtent.end.getTime();
        });

        view.map.add(layer);
      }

      document.addEventListener('click', (e) => {
        if (e.target.id === 'btnData') {
          moaarData();
        }
      });
    });
  </script>
</body>


</html>
	<html>

	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

	<!--
	ArcGIS API for JavaScript, https://js.arcgis.com
	For more information about the visualization-heatmap sample,
	read the original sample description at developers.arcgis.com.
	https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap/
	-->
	<title>
	Visualize points with a heatmap \| Sample \| ArcGIS API for JavaScript 4.24
	</title>

	<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />

	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 90%;
	width: 100%;
	}
	</style>

	<script src="https://js.arcgis.com/4.24/"></script>

	</head>

	<body>
	<div id="viewDiv"></div>
	<div id="actionsDiv">
	<button id="btnData">Moaaar</button>
	</div>

	<script>
	require([
	"esri/Map",
	"esri/layers/GeoJSONLayer",
	"esri/views/MapView",
	"esri/widgets/TimeSlider",
	"esri/smartMapping/renderers/heatmap"
	], (Map, GeoJSONLayer, MapView, TimeSlider, heatmapRendererCreator) => {

	const url =
	"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson";

	// The heatmap renderer assigns each pixel in the view with
	// an intensity value. The ratio of that intensity value
	// to the maxPixel intensity is used to assign a color
	// from the continuous color ramp in the colorStops property

	const renderer = {
	type: "heatmap",
	colorStops: [
	{ color: "rgba(63, 40, 102, 0)", ratio: 0 },
	{ color: "#472b77", ratio: 0.083 },
	{ color: "#4e2d87", ratio: 0.166 },
	{ color: "#563098", ratio: 0.249 },
	{ color: "#5d32a8", ratio: 0.332 },
	{ color: "#6735be", ratio: 0.415 },
	{ color: "#7139d4", ratio: 0.498 },
	{ color: "#7b3ce9", ratio: 0.581 },
	{ color: "#853fff", ratio: 0.664 },
	{ color: "#a46fbf", ratio: 0.747 },
	{ color: "#c29f80", ratio: 0.83 },
	{ color: "#e0cf40", ratio: 0.913 },
	{ color: "#ffff00", ratio: 1 }
	],
	maxDensity: 0.01,
	minDensity: 0
	};

	const map = new Map({
	basemap: "gray-vector"
	});

	const view = new MapView({
	container: "viewDiv",
	center: [-138, 30],
	zoom: 2,
	map: map
	});

	let dataPoints = [];
	let timeSlider = null;
	let layer = null;

	function moaarData() {
	fetch("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson")
	.then((response) => response.json())
	.then((data) => {
	const slice = data.features.slice(dataPoints.length, dataPoints.length + 20);
	dataPoints = [...dataPoints, ...slice];

	console.log(dataPoints);

	showTimeSlider();
	});
	}

	function showTimeSlider() {
	if (layer) {
	map.remove(layer);
	layer.destroy();
	layer = null;
	}

	if (timeSlider) {
	timeSlider.destroy();
	timeSlider = null;
	}

	const geoJSON = {
	type: "FeatureCollection",
	features: dataPoints.map(t => {
	return {
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: t.geometry.coordinates
	},
	properties: {
	identifier: t.id,
	mag: t.properties.mag,
	time: t.properties.time
	}
	}
	}),
	};

	const blob = new Blob([JSON.stringify(geoJSON)], { type: 'application/json' });
	const url = URL.createObjectURL(blob);

	layer = new GeoJSONLayer({
	url: url,
	title: "Magnitude 2.5+ earthquakes from the last week",
	copyright: "USGS Earthquakes",
	timeInfo: {
	startField: "time", // name of the date field
	interval: {
	// set time interval to one day
	unit: "days",
	value: 1
	}
	}
	});

	let heatmapParams = {
	layer: layer,
	view: view
	};

	// time slider widget initialization
	timeSlider = new TimeSlider({
	loop: true
	});

	view.ui.add(timeSlider, "bottom-left");

	heatmapRendererCreator.createRenderer(heatmapParams)
	.then(response => {
	layer.renderer = response.renderer;

	view.whenLayerView(layer).then((layerView) => {
	timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;

	let end = new Date(layer.timeInfo.fullTimeExtent.start);
	end.setDate(end.getDate() + 1);
	timeSlider.timeExtent = {
	start: layer.timeInfo.fullTimeExtent.start,
	end
	};

	//timeSlider.fullTimeExtent = mobHeatmapLayer.timeInfo.fullTimeExtent.expandTo('hours');
	//timeSlider.timeExtent = getTimeExtentForTimeSlider(telemetryData);

	timeSlider.play();
	});
	});

	// watch for time slider timeExtent change
	timeSlider.watch("timeExtent", () => {
	// only show earthquakes happened up until the end of
	// timeSlider's current time extent.
	layer.definitionExpression =
	"time <= " + timeSlider.timeExtent.end.getTime();
	});

	view.map.add(layer);
	}

	document.addEventListener('click', (e) => {
	if (e.target.id === 'btnData') {
	moaarData();
	}
	});
	});
	</script>
	</body>



	</html>