Questions tagged [react-simple-maps]
26 questions
3
votes
1 answer
Selectable states in react-simple-maps
I'm creating a map using react-simple-maps librery
this is my code so far

Jose A.
- 483
- 2
- 7
- 15
3
votes
0 answers
Error in "React simple maps" - zoom not working for value other then 1
I have used react simple maps, and want to add a custom zoom control to change zoom levels based on button clicks.
import React, { memo, useState } from "react";
import {
ZoomableGroup,
ComposableMap,
Geographies,
Geography
} from…

Arjit Acharya
- 31
- 2
2
votes
0 answers
How to add multiple coordinates to the map using the react-simple map
I'm attempting to add cordinates to my map of USa using react-simple-map, I want to have single origin point and but multiple destinations.
but this is how it renders.
https://codesandbox.io/s/equator-forked-62oi7x.
Do we need a to and from…

user1234
- 3,000
- 4
- 50
- 102
2
votes
1 answer
react-simple-maps shos small and not centered map
I'm using react-simple-maps to show a SVG map of Argentina, but the issue is that react-simple-maps shows with a small size the map and is not centered. I tried some things to fix it but I don't understand how to fix it.
It's the codesandbox where…

Fernando Azarías
- 23
- 2
1
vote
0 answers
React Simple Maps enlargen selected part of map on click
I have implemented US states by using react-simple-maps. I'm changing the geo url on the click of a state and I want the state to look bigger but it remains intact to it's location. I don't necessarily need to use this library but I need to put…

ouroboros
- 11
- 2
1
vote
1 answer
Generate map PDF using react-simple-maps and @react-pdf/renderer
in my use case, I have maps generated using the react-simple-maps component, I need to generate the pdf of this map, I'm trying to do this using the @react-pdf/renderer component, but it's not working!
React-pdf
React Simple Maps
See the example on…

Cleiton Freitas
- 387
- 7
- 18
1
vote
0 answers
Not able to apply styles on Marker- React simple map
I'm attempting to style markers to my map, but nothing works.
const geoUrl = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
const MapChart = () => {
return (

user1234
- 3,000
- 4
- 50
- 102
1
vote
1 answer
React simple maps renders the inverted polygon from the topojson
When I add a polygon, the entire area of the map is filled, and the polygon is "cut" out of it.
I expect a simple polygon to be rendered.
Here is a live example https://codesandbox.io/s/lsz8qh
This is my topojson
`
{
"type": "Topology",
…

Vadzim Liashkevich
- 121
- 4
1
vote
1 answer
Simple-map React, on hover it doesnt display the name
I'm trying to display the country name on hover using simple-map react with react tooltip.
With the console log on mouse enter I realised that on hover I actually get the name of the country and the rest of the info I need. Then i try to set it on…

Stamatia M.
- 11
- 2
1
vote
1 answer
Is there a way to access the link inside react-tooltip on hover?
Im using react-simple-maps with react-tooltip
Looks like the hover works fine, but I try to click on a link I've added on the tooltip but before I can get to the tooltip, it disappears and I can't access the content with my mouse.
is this possible?

Ken Ryan
- 539
- 1
- 10
- 31
1
vote
0 answers
React SVG Rendering Optimization
I made a globe map with react-simple-maps, did my best to optimize the rendering but still slow with complex json.
steps to reproduce
drag/zoom the globe, check performance
change top radio input to regions (more complex json)
drag/zoom the globe…

Jimi Gaspar
- 11
- 2
1
vote
1 answer
How to set ComposableMap not-focusable?
I'm trying to make a map that will show the name of the country when you hover your cursor. For this I am using react-simple-map with react-tooltip:
function OnHoverMap() {
const [content, setContent] = useState("");
return (
…

Natsuo
- 63
- 7
1
vote
1 answer
On react simple maps, is there a way to get coordinates of location in map by clicking on one?
I'm trying to make an interactive page in which there's a world map, and when you click on a location it creates a marker and saving the coordinates.
Any idea on how to achieve that?

Oren Sayag
- 31
- 1
- 4
1
vote
1 answer
Change region color on click (react-simple-maps)
I'm using react simple maps. I created a US map and I need to change the color of the state on click. I can change it by adding a press style prop to the Geography component but the color gets back to the default color when the click event is ended.…

Aysun Sulun Tas
- 21
- 2
0
votes
0 answers
Why is my ReactTooltip changing padding size after revisiting a webpage?
When just visiting my main webpage, the tooltip when hovering over the countries in my react-simple-maps map looks pretty normal:
tooltip
However, after going to a different webpage, and then promptly returning to the map-containing webpage (same…

Ryan
- 1