how to render the Flat Rectangular map without any curvature to it

[punithbm]

How to render the map in flat 2d as shown below - without any curvature

right now I am getting the curvature like this

Please let me know if any of you have faced the same requirement and how to update it

[zimrick]

Hi @punithbm,

You can use most projections supported by d3-geo-projection with react-simple-maps. This sandbox showcases how to use a custom projection with react-simple-maps:

https://codesandbox.io/s/world-map-sphere-masking-73160?from-embed=&file=/src/MapChart.js

If you want a "flat" projection without curvature I would suggest using something like the Patterson projection.

Note that if you are planning to create a choropleth map, I would suggest using the base projection in react-simple-maps (geoEqualEarth), as it represents the country sizes accurately.

I hope this helps you make the map you want.

[punithbm]

Hello, @zimrick thanks for the response

[StringKe]

@punithbm Do you have any progress and case code? I try to create a flat map with geoPatterson

[punithbm]

We were able to create a flat map. This was the code 👇

import { geoPatterson } from "d3-geo-projection";
import React from "react";
import { ComposableMap, Geographies, Geography, Marker } from "react-simple-maps";

export default function Map(props) {
    const { item } = props;
    const geoUrl = `${basePath + "world-antartica-110m.json"}`;
    const width = 800;
    const height = 420;
    // const projection = geoPatterson()
    // .translate([width / 2, height / 2])
    // .scale(120);
    // const geoUrl = 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries-sans-antarctica.json';
    const markers =
        item && item.answer.value
            ? getMarkers(item.answer.value)
            : getMarkers(item.default_value);
    return (
        <div>
            <ComposableMap
                projection="geoMercator"
                projectionConfig={{
                    // rotate: [0, 0],
                    center: [0, 30],
                    // parallels: [0, 0],
                    scale: 120,
                }}
                width={width}
                height={height}
                // projection={projection}
            >
                <Geographies geography={geoUrl}>
                    {({ geographies }) =>
                        geographies.map((geo) => (
                            <Geography
                                key={geo.rsmKey}
                                geography={geo}
                                fill="#EAEAEC"
                                stroke="#D6D6DA"
                            />
                        ))
                    }
                </Geographies>
                {markers.map(({ name, coordinates, markerOffset }) => (
                    <Marker key={name} coordinates={coordinates}>
                        <g
                            fill="none"
                            stroke="#17C3B2"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            transform="translate(-12, -24)"
                        >
                            <circle cx="12" cy="10" r="3" />
                            <path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z" />
                        </g>

                        <text
                            textAnchor="middle"
                            y={markerOffset}
                            style={{ fill: "#094E47", fontSize: "10px" }}
                            className="heading4Med"
                        >
                            {name}
                        </text>
                    </Marker>
                ))}
            </ComposableMap>
        </div>
    );
}

[asaduryan]

Put this and it will show as you want

projection="geoMercator"