janis/leaflet-esri-test
1
0
Fork 0
mirror of https://github.com/DerTyp7/leaflet-esri-test.git synced 2025-10-30 12:57: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", "name": "leaflet-esri",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.16.5", "esri-leaflet": "^3.0.8",
"@testing-library/react": "^13.4.0", "esri-leaflet-heatmap": "^2.0.1",
"@testing-library/user-event": "^13.5.0", "leaflet": "^1.9.2",
"esri-leaflet": "^3.0.8", "leaflet.heat": "^0.2.0",
"esri-leaflet-heatmap": "^2.0.1", "react": "^18.2.0",
"leaflet": "^1.9.2", "react-dom": "^18.2.0",
"leaflet.heat": "^0.2.0", "react-esri-leaflet": "^2.0.1",
"react": "^18.2.0", "react-leaflet": "^4.1.0",
"react-dom": "^18.2.0", "react-scripts": "5.0.1",
"react-esri-leaflet": "^2.0.1", "web-vitals": "^2.1.4"
"react-leaflet": "^4.1.0", },
"react-scripts": "5.0.1", "scripts": {
"web-vitals": "^2.1.4" "start": "react-scripts start",
}, "build": "react-scripts build",
"scripts": { "test": "react-scripts test",
"start": "react-scripts start", "eject": "react-scripts eject"
"build": "react-scripts build", },
"test": "react-scripts test", "eslintConfig": {
"eject": "react-scripts eject" "extends": [
}, "react-app",
"eslintConfig": { "react-app/jest"
"extends": [ ]
"react-app", },
"react-app/jest" "browserslist": {
] "production": [
}, ">0.2%",
"browserslist": { "not dead",
"production": [ "not op_mini all"
">0.2%", ],
"not dead", "development": [
"not op_mini all" "last 1 chrome version",
], "last 1 firefox version",
"development": [ "last 1 safari version"
"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 { 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 (
<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 ( return (
<MapContainer id="mapId" zoom={2} center={[39.759, -88.157]}> <MapContainer id="mapId" zoom={8} center={[52.505, -0.09]}>
{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();