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

dfg

Browse Source
This commit is contained in:
Janis
2022-10-09 20:26:01 +02:00
parent b707bda6a1
commit d8549c0128
5 changed files with 40894 additions and 28915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40228
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@@ -3,19 +3,12 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.16.5", "leaflet": "1.5.1",
"@testing-library/react": "^13.4.0", "react": "16.14.0",
"@testing-library/user-event": "^13.5.0", "react-dom": "16.14.0",
"esri-leaflet": "^3.0.8", "react-leaflet": "2.5.0",
"esri-leaflet-heatmap": "^2.0.1", "react-leaflet-heatmap-layer": "2.0.0",
"leaflet": "^1.9.2", "react-scripts": "3.0.1"
"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": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",

85
src/Map.jsx
View File

@@ -1,87 +1,48 @@
import React from "react"; import React from "react";
import { MapContainer, TileLayer } from "react-leaflet"; import { Map as LeafletMap, TileLayer } from "react-leaflet";
import HeatmapLayer from "react-esri-leaflet/plugins/HeatmapLayer"; import HeatmapLayer from "react-leaflet-heatmap-layer";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { useState, useEffect } from "react"; import { useState, useEffect, useInterval } from "react";
import { geojson1, geojson2 } from "./atd";
const urls = [ let number = 1;
"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( const [currentGeoJson, setCurrentGeoJson] = useState(geojson1);
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/MapServer/0"
);
const [refreshHook, setRefreshHook] = useState(0);
useEffect(() => { useInterval(() => {
const interval = setInterval(() => { console.log("sf");
if (Date.now() - lastRefreshed >= 1000) { if (number === 1) {
if (index === 1) { setCurrentGeoJson(geojson2);
setUrl(urls[index]); } else if (number === 2) {
index = 0; setCurrentGeoJson(geojson1);
} else {
setUrl(urls[index]);
index = 1;
} }
} }, 2000);
setRefreshHook(Math.random());
//console.log(urls[index]);
}, 100);
return () => clearInterval(interval);
}, []);
function renderHeatmap() { function renderHeatmap() {
//console.log("Render"); //console.log("Render");
return ( return (
<HeatmapLayer <HeatmapLayer
url={url} fitBoundsOnLoad
radius={20} fitBoundsOnUpdate
eventHandlers={{ points={currentGeoJson.features}
loading: () => console.log("loading heatmap"), 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 ( return (
<MapContainer id="mapId" zoom={2} center={[39.759, -88.157]}> <LeafletMap 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))*/} {/*console.log("lastRefreshed ago: " + (Date.now() - lastRefreshed))*/}
{Date.now() - lastRefreshed >= 5000 ? turnOffMap() : renderHeatmap()} {/*Date.now() - lastRefreshed >= 5000 ? turnOffMap() : renderHeatmap()*/}
</MapContainer> {renderHeatmap()}
</LeafletMap>
); );
} }

1922
src/atd.js Normal file
View File

File diff suppressed because it is too large Load Diff

19
src/index.js
View File

@@ -1,12 +1,13 @@
import { StrictMode } from "react"; import React from "react";
import { render } from "react-dom"; 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"); const rootElement = document.getElementById("root");
render( ReactDOM.render(<App />, rootElement);
<StrictMode>
<App />
</StrictMode>,
rootElement
);