janis/leaflet-esri-test
1
0
Fork 0
mirror of https://github.com/DerTyp7/leaflet-esri-test.git synced 2025-10-30 21:07:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

heat

Browse Source
This commit is contained in:
Janis
2022-10-09 21:56:41 +02:00
parent b707bda6a1
commit 91302fbf84
5 changed files with 28714 additions and 28925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5971
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -3,9 +3,6 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "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": "^3.0.8",
"esri-leaflet-heatmap": "^2.0.1", "esri-leaflet-heatmap": "^2.0.1",
"leaflet": "^1.9.2", "leaflet": "^1.9.2",

235
src/HeatMap.jsx Normal file
View File

@@ -0,0 +1,235 @@
import React, { useState } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";
import "leaflet.heat";
import { useEffect } from "react";
//! PROBLEM
// Wenn sate updated wird ein neuer layer hinzugefügt und der alte bleibt noch da.
// Testen: Etwas laufen lassen und dann mal ein kommentar in diesem code speicher (damit der browser refresht)
function randomFromInterval(min, max) {
// min and max included
return Math.random() * (max - min + 1) + min;
}
let layer = L.heatLayer([]);
function HeatMap(props) {
const map = useMap();
useEffect(() => {
layer.addTo(map);
const interval = setInterval(() => {
//console.log(map._layers);
const points = [
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
[
randomFromInterval(52.3, 52.4),
randomFromInterval(0.1, -0.1),
randomFromInterval(0, 500),
],
].map((p) => {
return [p[0], p[1], p[2]]; // lat lng intensity
});
layer.setLatLngs(points);
}, 2000);
return () => clearInterval(interval);
}, []);
}
export default HeatMap;

78
src/Map.jsx
View File

@@ -1,86 +1,16 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { MapContainer, TileLayer } from "react-leaflet"; import { MapContainer, TileLayer } from "react-leaflet";
import HeatmapLayer from "react-esri-leaflet/plugins/HeatmapLayer";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { useState, useEffect } from "react"; import HeatMap from "./HeatMap";
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 index = 0;
let lastRefreshed = Date.now();
let heatmapTurnedOff;
let isHeatmapOff = false;
function Map() { function Map() {
const [url, setUrl] = useState(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer/0"
);
const [refreshHook, setRefreshHook] = useState(0);
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);
}, []);
function renderHeatmap() {
//console.log("Render");
return ( return (
<HeatmapLayer <MapContainer id="mapId" zoom={8} center={[52.505, -0.09]}>
url={url}
radius={20}
eventHandlers={{
loading: () => console.log("loading heatmap"),
}}
/>
);
}
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 ? "" : ""}
<TileLayer <TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/> />
{/*console.log("lastRefreshed ago: " + (Date.now() - lastRefreshed))*/} <HeatMap />
{Date.now() - lastRefreshed >= 5000 ? turnOffMap() : renderHeatmap()}
</MapContainer> </MapContainer>
); );
} }

18
src/index.js
View File

@@ -1,12 +1,14 @@
import { StrictMode } from "react"; import React from "react";
import { render } from "react-dom"; import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App"; import App from "./App";
import reportWebVitals from "./reportWebVitals";
const rootElement = document.getElementById("root"); const root = ReactDOM.createRoot(document.getElementById("root"));
render( root.render(
<StrictMode> <React.StrictMode>
<App /> <App />
</StrictMode>, </React.StrictMode>
rootElement
); );
reportWebVitals();