aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Add mouseover tooltip to markers

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-04-06 02:11:38 +01:00
parent b3102978cb
commit f3abddc98c
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/App.jsx
View File

@ -397,6 +397,7 @@ function App() {
popup: popupContent, popup: popupContent,
icon: icon, icon: icon,
markerText: markerText.toLowerCase().replace(/[^a-zA-Z0-9]/g, ''), markerText: markerText.toLowerCase().replace(/[^a-zA-Z0-9]/g, ''),
objectTitle: objectTitle,
display: true display: true
}); });
} }

7
frontend/src/components/MapComponent.jsx
View File

@ -1,5 +1,5 @@
import { React, useState, useEffect } from "react"; import { React, useState, useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import { MapContainer, TileLayer, Marker, Popup, Tooltip } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-markercluster"; import MarkerClusterGroup from "react-leaflet-markercluster";
import L, { Icon } from "leaflet"; import L, { Icon } from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
@ -119,8 +119,11 @@ const MapComponent = ({ markers, clusteringEnabled }) => {
)} )}
{clusteringEnabled ? ( {clusteringEnabled ? (
<MarkerClusterGroup> <MarkerClusterGroup>
{markers.map(({ coords, popup, icon }, index) => ( {markers.map(({ coords, popup, icon, objectTitle}, index) => (
<Marker key={index} position={coords} icon={icons.get(icon)}> <Marker key={index} position={coords} icon={icons.get(icon)}>
<Tooltip>
{objectTitle}
</Tooltip>
<Popup>{popup}</Popup> <Popup>{popup}</Popup>
</Marker> </Marker>
))} ))}