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

feat([2fd88f42]): add marker clustering to points view

Browse Source
This commit is contained in:
Floke
2026-02-04 13:31:11 +00:00
parent 3a7b7afe9a
commit 4ffb52afbf
4 changed files with 76 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,31 +28,44 @@ const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier,
return '#66bd63'; // Green
};
import MarkerClusterGroup from 'react-leaflet-cluster';
// ... (imports and interface definitions)
const MapDisplay: React.FC<MapDisplayProps> = ({ heatmapData, radiusMultiplier, viewMode }) => {
// ... (helper functions and state)
const renderPoints = () => (
heatmapData.map((point, idx) => (
<CircleMarker
key={idx}
center={[point.lat, point.lon]}
radius={calculateRadius(point.count)}
pathOptions={{
color: getColor(point.count),
fillColor: getColor(point.count),
fillOpacity: 0.7
}}
>
<Tooltip>
PLZ: {point.plz} <br />
Count: {point.count}
{point.attributes_summary && Object.entries(point.attributes_summary).map(([attr, values]) => (
<div key={attr}>
<strong>{attr}:</strong> {values.join(', ')}
</div>
))}
</Tooltip>
</CircleMarker>
))
<MarkerClusterGroup>
{heatmapData.map((point, idx) => (
<CircleMarker
key={idx}
center={[point.lat, point.lon]}
radius={calculateRadius(point.count)}
pathOptions={{
color: getColor(point.count),
fillColor: getColor(point.count),
fillOpacity: 0.7
}}
>
<Tooltip>
PLZ: {point.plz} <br />
Count: {point.count}
{point.attributes_summary && Object.entries(point.attributes_summary).map(([attr, values]) => (
<div key={attr}>
<strong>{attr}:</strong> {values.join(', ')}
</div>
))}
</Tooltip>
</CircleMarker>
))}
</MarkerClusterGroup>
);
// ... (rest of the component)
};
const renderHeatmap = () => (
<HeatmapLayer
points={heatmapData}