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.07k stars 424 forks source link

Projection config explained #318

Open vvilho opened 1 year ago

vvilho commented 1 year ago

Can anyone explain to me how to use the projection config.

I have a geojson

{
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          coordinates: [
            [
              [25.168668930361804, 60.21369301706079],
              [25.173198455635855, 60.216424263323375],
              [25.166250711020652, 60.215776147924394],
              [25.16566934970973, 60.21625230852196],
              [25.165208346871367, 60.21612287354546],
              [25.168668930361804, 60.21369301706079],
            ],
          ],
          type: 'Polygon',
        },
      },
    ],
  }

And I'd like to have map positioned so that it fits the geojson inside itself. I also want to rotate map -11 degrees.

projectionConfig={{
            rotate: [-10.9, -52.3, -22.2],
            center: [25.1690461357689, 60.21508877074436],
            scale: 15969600,
          }}

With Zoomable group I manage to get this to work but not without it.

Thanks already.