Fit the map?

[alinpetrusca]

Hello,

Is there a way to make the map fit the parent container ? I want it to be entirely visible on all screen resolutions, without manually panning & zooming.

I don't know how to center and zoom the map to do this. I tried to change this manually using:

• scale and offsets on projectionConfig
• scale on projectionConfig and center on ZoomableGroup But with no success, it only works for a specific screen size.

Thanks for your time :)

Topo json: france-topo.txt

[edouarobin]

@Alin13 did you find a solution ?

[alinpetrusca]

@edouarobin No I didn't. I just used a simple SVG map, without using this library.

[edouarobin]

@Alin13 If you are interested, I found a projection config that perfectly fit the france-topo map. Here is my ComposableMap component:

<ComposableMap
   projection="geoAzimuthalEqualArea"
   projectionConfig={{
        rotate: [-4.0, -46.2, 0],
        scale: 3400
    }}
   style={{
        maxHeight: "500"
   }}
>
       <Geographies geography={geoUrl}>
               // bla bla bla
      </Geographies>
</ComposableMap>

[alinpetrusca]

Hey @edouarobin I'm not using this library anymore. But thank you very much, it may help in the future! :)

[stephenPolFajardo]

Hey. how can i filter the Australia content and put maker each coordinates.

[david-vendel]

And this might be projection config for USA states in NA:

projectionConfig={{
        rotate: [97, -40, 0],
        scale: 1100,
      }}

[gsscruz]

To centralize Canada using its topojson: https://gist.githubusercontent.com/Brideau/2391df60938462571ca9/raw/f5a1f3b47ff671eaf2fb7e7b798bacfc6962606a/canadaprovtopo.json

 <ComposableMap
      projection='geoMercator'
      projectionConfig={{
        rotate: [105, -65, 0],
        scale: 800,
        center: [8, 0],
      }}
      style={{
        width: '800',
      }}
    >