janis/example-esri-react
1
0
Fork 0
mirror of https://github.com/DerTyp7/example-esri-react.git synced 2025-10-29 12:42:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

added basic headmap

Browse Source
This commit is contained in:
Janis
2022-09-25 16:03:06 +02:00
parent 32bcdcf696
commit 6cd7330d54
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.js
View File

@@ -2,6 +2,8 @@ import React, { useRef, useEffect } from "react";
import "./App.css"; import "./App.css";
import Map from "@arcgis/core/Map"; import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView"; 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 import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html
//! Uncomment this for online api use //! Uncomment this for online api use
@@ -11,14 +13,28 @@ import esriConfig from "@arcgis/core/config"; // https://developers.arcgis.com/j
function App() { function App() {
const MapEl = useRef(null); const MapEl = useRef(null);
useEffect(() => { 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({ const map = new Map({
basemap: "topo-vector", //"arcgis-topographic" for online api use basemap: "topo-vector", //"arcgis-topographic" for online api use
layers: [csvLayer],
}); });
const view = new MapView({ const view = new MapView({
container: MapEl.current, container: MapEl.current,
map: map, 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>; return <div style={{ height: 800 }} ref={MapEl}></div>;
} }