janis/leaflet-esri-test
1
0
Fork 0
mirror of https://github.com/DerTyp7/leaflet-esri-test.git synced 2025-10-29 20:42:13 +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

57227
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

81
package.json
View File

@@ -1,44 +1,41 @@
{
"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": {
"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"
]
}
}

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 HeatmapLayer from "react-esri-leaflet/plugins/HeatmapLayer";
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() {
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 (
<HeatmapLayer
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 ? "" : ""}
<MapContainer id="mapId" zoom={8} center={[52.505, -0.09]}>
<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()}
<HeatMap />
</MapContainer>
);
}

18
src/index.js
View File

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