Floke/Brancheneinstufung2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[31b88f42] Finalize staff locations and travel time logic

Browse Source
This commit is contained in:
Floke
2026-03-09 14:44:10 +00:00
parent 9afe4148ba
commit 2c90da3ba5
4 changed files with 185 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
heatmap-tool/frontend/src/components/MapDisplay.tsx
View File

@@ -1,6 +1,6 @@
// src/components/MapDisplay.tsx
import React from 'react';
import { MapContainer, TileLayer, CircleMarker, Tooltip, Marker, Circle } from 'react-leaflet';
import { MapContainer, TileLayer, CircleMarker, Tooltip, Marker, Circle, GeoJSON } from 'react-leaflet';
import { HeatmapLayer } from 'react-leaflet-heatmap-layer-v3';
import 'leaflet/dist/leaflet.css';
import 'leaflet.heat';
@@ -25,6 +25,7 @@ interface MapDisplayProps {
showSales: boolean;
showTechnicians: boolean;
travelRadius: number;
isochrones?: Record<string, any>;
}
const MapDisplay: React.FC<MapDisplayProps> = ({
@@ -35,7 +36,8 @@ const MapDisplay: React.FC<MapDisplayProps> = ({
staffData,
showSales,
showTechnicians,
travelRadius
travelRadius,
isochrones = {}
}) => {
const germanyCenter: [number, number] = [51.1657, 10.4515];
const maxCount = heatmapData.length > 0 ? Math.max(...heatmapData.map(p => p.count), 1) : 1;
@@ -120,16 +122,25 @@ const MapDisplay: React.FC<MapDisplayProps> = ({
if (showSales) {
staffData.sales.forEach((person, idx) => {
const iso = isochrones[person.name];
elements.push(
<React.Fragment key={`sales-${idx}`}>
<Marker position={[person.lat, person.lon]} icon={salesIcon}>
<Tooltip permanent={false}>Sales: {person.name} ({person.plz})</Tooltip>
</Marker>
<Circle
center={[person.lat, person.lon]}
radius={travelRadius * 1000}
pathOptions={{ color: 'blue', fillColor: 'blue', fillOpacity: 0.1 }}
/>
{iso ? (
<GeoJSON
key={`iso-sales-${person.name}-${iso.minutes}`}
data={iso.data}
pathOptions={{ color: 'blue', fillColor: 'blue', fillOpacity: 0.2, weight: 1 }}
/>
) : (
<Circle
center={[person.lat, person.lon]}
radius={travelRadius * 1000}
pathOptions={{ color: 'blue', fillColor: 'blue', fillOpacity: 0.1 }}
/>
)}
</React.Fragment>
);
});
@@ -137,16 +148,25 @@ const MapDisplay: React.FC<MapDisplayProps> = ({
if (showTechnicians) {
staffData.technicians.forEach((person, idx) => {
const iso = isochrones[person.name];
elements.push(
<React.Fragment key={`tech-${idx}`}>
<Marker position={[person.lat, person.lon]} icon={technicianIcon}>
<Tooltip permanent={false}>Tech: {person.name} ({person.plz})</Tooltip>
</Marker>
<Circle
center={[person.lat, person.lon]}
radius={travelRadius * 1000}
pathOptions={{ color: 'orange', fillColor: 'orange', fillOpacity: 0.1 }}
/>
{iso ? (
<GeoJSON
key={`iso-tech-${person.name}-${iso.minutes}`}
data={iso.data}
pathOptions={{ color: 'orange', fillColor: 'orange', fillOpacity: 0.2, weight: 1 }}
/>
) : (
<Circle
center={[person.lat, person.lon]}
radius={travelRadius * 1000}
pathOptions={{ color: 'orange', fillColor: 'orange', fillOpacity: 0.1 }}
/>
)}
</React.Fragment>
);
});