search

zcreativelabs / react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
https://www.react-simple-maps.io/
MIT License
3.04k stars 424 forks source link

Need help scaling down the width of a map #256

Closed wbigert closed 3 years ago

wbigert commented 3 years ago

I have implemented a react-simple-maps project according to the code example with labels. However, the topoJSON for Sweden that I am using is a bit too short vertically (or perhaps it is not the topoJSON that is at fault?). Sweden is supposed to be taller than it is in the sandbox that I will link. So I have tried to find a way to make it taller. ` <ComposableMap data-tip="" projectionConfig={{ scale: 2000, center: [21, 60] }} style={{ maxHeight: "800" }} preserveAspectRatio="none" viewBox="0 0 800 500"

` I have tried to follow this tutorial to scale it, but changing the height and width of ComposableMap does not seem to have the same effect as changing the svg height and width directly (it only affect viewbox dimensions). Changing maxHeight from 0 to 800 successively makes the map go from vertically retracted to fully expanded, but never more than that. Any ideas of what I can do?

Sandbox: https://codesandbox.io/s/map-chart-with-tooltip-forked-rlnps?file=/src/MapChart.js

wbigert commented 3 years ago

I found a solution which was to change the projection to geoAlbers and rotate it to 0,0,0 and then scale it to fullscreen. Then it had the proper height. But maybe my issue is relevant for someone else? Closing it anyways: `<ComposableMap data-tip="" projection="geoAlbers" projectionConfig={{ scale: 2400, rotate: [0, 0, 0], center: [20, 61] }} preserveAspectRatio="none"

`