From 6cd7330d547b801006b01a405e77b5984299f940 Mon Sep 17 00:00:00 2001
From: Janis <janis.meister87@gmail.com>
Date: Sun, 25 Sep 2022 16:03:06 +0200
Subject: [PATCH] added basic headmap

---
 src/App.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/App.js b/src/App.js
index f8e788b..76a154d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import React, { useRef, useEffect } from "react";
 import "./App.css";
 import Map from "@arcgis/core/Map";
 import MapView from "@arcgis/core/views/MapView";
+import { createRenderer } from "@arcgis/core/smartMapping/renderers/heatmap";
+import CSVLayer from "@arcgis/core/layers/CSVLayer";
 import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html
 
 //! Uncomment this for online api use
@@ -11,14 +13,28 @@ import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/j
 function App() {
 	const MapEl = useRef(null);
 	useEffect(() => {
+		const csvLayer = new CSVLayer({
+			// https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html#creating-a-csvlayer
+			url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv",
+			copyright: "USGS Earthquakes",
+		});
 		const map = new Map({
 			basemap: "topo-vector", //"arcgis-topographic" for online api use
+			layers: [csvLayer],
 		});
 
 		const view = new MapView({
 			container: MapEl.current,
 			map: map,
 		});
+
+		createRenderer({
+			// https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-heatmap.html#createRenderer
+			view: view,
+			layer: csvLayer,
+		}).then((response) => {
+			csvLayer.renderer = response.renderer;
+		});
 	});
 	return <div style={{ height: 800 }} ref={MapEl}></div>;
 }