dfg

package.json

@@ -1,44 +1,37 @@
 {
-  "name": "leaflet-esri",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "esri-leaflet": "^3.0.8",
-    "esri-leaflet-heatmap": "^2.0.1",
-    "leaflet": "^1.9.2",
-    "leaflet.heat": "^0.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-esri-leaflet": "^2.0.1",
-    "react-leaflet": "^4.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "leaflet-esri",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"leaflet": "1.5.1",
+		"react": "16.14.0",
+		"react-dom": "16.14.0",
+		"react-leaflet": "2.5.0",
+		"react-leaflet-heatmap-layer": "2.0.0",
+		"react-scripts": "3.0.1"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

src/Map.jsx

@@ -1,87 +1,48 @@
 import React from "react";
-import { MapContainer, TileLayer } from "react-leaflet";
-import HeatmapLayer from "react-esri-leaflet/plugins/HeatmapLayer";
+import { Map as LeafletMap, TileLayer } from "react-leaflet";
+import HeatmapLayer from "react-leaflet-heatmap-layer";
 import "leaflet/dist/leaflet.css";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useInterval } from "react";
+import { geojson1, geojson2 } from "./atd";
 
-const urls = [
-	"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0",
-	"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer/0",
-];
+let number = 1;
 
-let index = 0;
-
-let lastRefreshed = Date.now();
-let heatmapTurnedOff;
-let isHeatmapOff = false;
 function Map() {
-	const [url, setUrl] = useState(
-		"https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer/0"
-	);
-	const [refreshHook, setRefreshHook] = useState(0);
+	const [currentGeoJson, setCurrentGeoJson] = useState(geojson1);
 
-	useEffect(() => {
-		const interval = setInterval(() => {
-			if (Date.now() - lastRefreshed >= 1000) {
-				if (index === 1) {
-					setUrl(urls[index]);
-					index = 0;
-				} else {
-					setUrl(urls[index]);
-					index = 1;
-				}
-			}
-
-			setRefreshHook(Math.random());
-			//console.log(urls[index]);
-		}, 100);
-
-		return () => clearInterval(interval);
-	}, []);
+	useInterval(() => {
+		console.log("sf");
+		if (number === 1) {
+			setCurrentGeoJson(geojson2);
+		} else if (number === 2) {
+			setCurrentGeoJson(geojson1);
+		}
+	}, 2000);
 
 	function renderHeatmap() {
 		//console.log("Render");
 		return (
 			<HeatmapLayer
-				url={url}
-				radius={20}
-				eventHandlers={{
-					loading: () => console.log("loading heatmap"),
-				}}
+				fitBoundsOnLoad
+				fitBoundsOnUpdate
+				points={currentGeoJson.features}
+				longitudeExtractor={(m) => m.geometry.coordinates[0]}
+				latitudeExtractor={(m) => m.geometry.coordinates[1]}
+				intensityExtractor={(m) => parseFloat(m.geometry.coordinates[1])}
 			/>
 		);
 	}
 
-	function turnOffMap() {
-		//console.log("Turn off");
-
-		if (!isHeatmapOff) {
-			heatmapTurnedOff = Date.now();
-			isHeatmapOff = true;
-		}
-
-		//console.log("heatmapTurnedOff ago: " + (Date.now() - heatmapTurnedOff));
-
-		if (Date.now() - heatmapTurnedOff >= 50) {
-			// Wie lange ist die heatpmap aus???
-			//console.log("Turned off for 500");
-			lastRefreshed = Date.now(); // Mach map wieder an
-			isHeatmapOff = false;
-		}
-
-		return "";
-	}
-
 	return (
-		<MapContainer id="mapId" zoom={2} center={[39.759, -88.157]}>
-			{refreshHook ? "" : ""}
+		<LeafletMap id="mapId" zoom={2} center={[39.759, -88.157]}>
 			<TileLayer
 				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 			/>
 			{/*console.log("lastRefreshed ago: " + (Date.now() - lastRefreshed))*/}
-			{Date.now() - lastRefreshed >= 5000 ? turnOffMap() : renderHeatmap()}
-		</MapContainer>
+			{/*Date.now() - lastRefreshed >= 5000 ? turnOffMap() : renderHeatmap()*/}
+			{renderHeatmap()}
+		</LeafletMap>
 	);
 }
 

src/index.js

@@ -1,12 +1,13 @@
-import { StrictMode } from "react";
-import { render } from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 
-import App from "./App";
+import Map from "./Map";
+
+import "./styles.css";
+
+function App() {
+	return <Map />;
+}
 
 const rootElement = document.getElementById("root");
-render(
-	<StrictMode>
-		<App />
-	</StrictMode>,
-	rootElement
-);
+ReactDOM.render(<App />, rootElement);