react-simple-maps shos small and not centered map

Question

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 there's my code:- https://codesandbox.io/s/basic-map-forked-9x1bl

It's because the viewBox you are using. You may try to get the bounding box of the group .rsm-geographies and use the data for a new value of the viewBox. Please read about [`getBBox()`](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox) — enxaneta, Nov 01 '20 at 18:41
@FernandoAzarías did you ever figure this out? I am having the same issue — Ceri Westcott, Jul 29 '21 at 10:43
@FernandoAzarías I believe I figured it out, in your geojson, there is a property called transform: scale[...., ....]. you need to update the scale in the GeoJson instead of the react maps — Ceri Westcott, Aug 02 '21 at 12:56

score 1 · Answer 1 · answered Nov 02 '20 at 14:51

1

If you are facing issue with the zoom then you can try using the ZoomableGroup at ZoomableGroup

you can use it by importing import { ZoomableGroup } from "react-simple-maps"

answered Nov 02 '20 at 14:51

Pratik Agrawal

405
3
17

Thanks, I will try with that approach – Fernando Azarías Nov 02 '20 at 23:20

react-simple-maps shos small and not centered map

1 Answers1