mirror of
https://github.com/DerTyp7/example-esri-react.git
synced 2025-10-29 04:42:07 +01:00
added basic headmap
This commit is contained in:
16
src/App.js
16
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>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user