2

I have some javascript using d3 that can draw a map using a robinson projection, and I can even draw a simple box atop the map using my projection to build a path generator. However, the box I get out is curved along its horizontal lines:

curved bounding box

I thought the robinson project gave perfectly horizontal latitude parallels. This is the code I'm using to generate the box:

this.projection = geoRobinson()
    // center and scale to container properly
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);

// outline of mexico according to some website:
const south = 14.5388286402;
const west = -117.12776;
const north = 32.72083;
const east = -86.811982388;

const box: Feature<Geometry, GeoJsonProperties> = {
    type: "Feature",
    geometry: {
        type: "Polygon",
        coordinates: [[
            [east, south],
            [west, south],
            [west, north],
            [east, north],
            [east, south],
        ]]
    },
    properties: {}
};

const pathGenerator = geoPath().projection(projection);
const d = pathGenerator(box);

// ...
<svg>
  // ... draw countries

  // draw box:
  <path d={d} style={{ stroke: "#ff5d5d", strokeWidth: 2, fill: "#FFC9C9"}} />
</svg>

Am I using the projection wrong? The box is supposed to represent all the points within the bounding latitudes and longitudes. I know that great circles curve around the earth both horizontally and vertically, but using robinson I would have expected the horizontal lines to be flat. If this isn't wrong, how can I draw

whiterook6
  • 3,270
  • 3
  • 34
  • 77
  • 1
    The path follows great circle distances, but great circles do not follow parallels. This [answer](https://stackoverflow.com/a/56409480/7106086) should provide a solution. You could use a Robinson with code in the answer to get the desired outcome.\ – Andrew Reid Jun 03 '20 at 21:20
  • You are correct, a Robinson projection will have straight parallel latitudes. I don’t know how to fix your code though :) – Bryan Jun 03 '20 at 21:25
  • @AndrewReid if you posted an answer to this effect, I'd accept it. It looks like it only projects each vertex then draws great circle lines between them. Simple passing many points in between each corner shortens those great circles into segments and makes them look straight. Thanks. – whiterook6 Jun 04 '20 at 17:01

0 Answers0