score:0

Here's a solution to the problem: apply the projection in your code, not using the command line tools. I also found that simplifying the topojson caused over simplification and an unnecessarily small file size:

shp2json -n input/ne_50m_europe_qgis/ne_50m_europe_qgis.shp \
| ndjson-filter '["ALB", "AND", "AUT", "BEL", "BGR", "BIH", "BLR", "CHE", "CYP", "CZE", "DEU", "DNK", "ESP", "EST", "FIN", "FRA", "FRO", "GBR", "GIB", "GRC", "HRV", "HUN", "IMN", "IRL", "ISL", "ITA", "LIE", "LTU", "LUX", "LVA", "MCO", "MDA", "MDA", "MKD", "MLT", "MNE", "NLD", "NOR", "POL", "PRT", "ROU", "SMR", "SRB", "SVK", "SVN", "SWE", "UKR", "VAT", "XKX"].includes(d.properties.adm0_a3)' \
| ndjson-map 'd.properties = {"adm0_a3": d.properties.adm0_a3}, d' \
| ndjson-reduce \
| ndjson-map '{type: "FeatureCollection", features: d}' \
[REMOVE GEOPROJECT COMMAND HERE]
> output/europe-geo.json

geo2topo countries=output/europe-geo.json \
[OPTIONALLY REMOVE TOPOSIMPLIFY COMMAND HERE]
| topoquantize 1e5 \
> output/europe.json

Here is the code I then used to make my map (notice that I am applying my projection in the code):

const width = 960, height = 831.22;

const svg = d3.select("#map")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

d3.json("europe.topo.json", function(error, topology) {
  if (error) throw error;

  const countries = topojson.feature(topology, topology.objects.countries);

  const projection = d3.geoAzimuthalEquidistant()
    .fitSize([960, 831.22], countries);

  const path = d3.geoPath()
    .projection(projection);

  svg.append("path")
    .datum(countries)
    .attr("stroke", "white")
    .attr("d", path);

  const coords = projection([0.010360, 51.513069]); // London

  const place = svg.append("g")
    .attr("transform", "translate(" + (coords[0] - 2.5) + "," + (coords[1] - 2.5) + ")");

  place.append("circle")
    .attr("fill", "red")
    .attr("r", 5);
});

Related Query

More Query from same tag