-
Notifications
You must be signed in to change notification settings - Fork 425
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mapchart with tooltip example broken #320
Comments
Where is the source code for the map on the landing page? Showing country/content on hover is a crucial feature. |
Inside App.tsx const [tooltipContent, setTooltipContent] = useState('test');
const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
function onMouseUpdate(e: MouseEvent) {
setTooltipPosition({ x: e.pageX, y: e.pageY });
}
return <ThemeProvider>
<MapChart setTooltipContent={setTooltipContent} setTooltipPosition={setTooltipPosition} />
<Tooltip id='map-tooltip' float>{tooltipContent}</Tooltip>
</ThemeProvider>; Inside MapChar.tsx const MapChart = ({ setTooltipContent, setTooltipPosition }: { setTooltipContent: (name: string) => void, setTooltipPosition: (position: IPosition) => void }) => {
return <ComposableMap height={490} width={1000} data-tooltip-id='map-tooltip'>
<ZoomableGroup>
<Geographies geography='/features.json'> |
hi @elibroftw, can you refer to this issue #314 |
Not really, I updated my comment to be better. The solution you referred to uses deprecated properties and an unnecessary div. |
So have a look at the sandbox in issue #314 which pretty much solved it for me. In your solution, you have used two
|
https://www.react-simple-maps.io/examples/map-chart-with-tooltip/
The text was updated successfully, but these errors were encountered: