Given an array of geojson coordinates, how can I translate the lat/long values an draw its polygon to a canvas tag?

Community Help
2

You can use GitHub - d3/d3-geo: Geographic projections, spherical shapes and spherical trigonometry. ; the geoPath method creates a path generator, and can take in a projection (mapping the coordinates to the screen) and a context (to draw on canvas).

For example:


const context = canvas.getContext("2d");
const projection = d3.geoMercator().fitExtent([[ 10, 10], [ 950, 590]], GeoJSON);
const path = d3.geoPath(projection, context);

context.beginPath();
path(GeoJSON);
context.fillStyle = "#eee";
context.fill();
context.stroke();

However you might be surprised because the winding order of the polygon is the opposite of what d3-geo expects. As a consequence, I had to apply “.reverse()” on its coordinates—there are better ways to do this, but I hope this gets you started.