javascript - Lambert conic conformal projection in d3

Question

I'm trying to project a set of points ([long, lat] tuples) on top of an SVG map of my home country Austria:

https://commons.wikimedia.org/wiki/File:Austria-geographic_map-blank.svg

The description of the SVG file on Wikimedia gives a projection name and the bounds of the map:

Lambert Conformal Conic, WGS84 datum
Geographic limits of the map:

West: 17.2° W
East: 9.3° W
North: 49.2° N
South: 46.0° N

Naive as I am, I thought this information would be enough to create the right kind of projection with D3.

This is what I tried first:

    let gcc = d3.geoConicConformal()
        .fitSize([width, height], bbox)

Where bbox is a GeoJSON polygon representing the boundaries of the map as given above.

Unfortunately the result is not the correct projection:

Now, from reading the D3 docs I can guess that I have to specify more parameters for the projection, e.g. two standard parallels. Unfortunately I have no idea what they are, and trying various values around the western and eastern boundaries of the map didn't work. I assume they can be derived from what I know about the map though, or maybe not?

Secondly, what confuses me is that the projection is not just wrongly rotated but incorrectly scaled as well -- I thought using .fitSize would take care of that.

Can anybody give me any pointers on correctly setting up a Lambert conic conformal projection?

Answer 1

Fitsize will translate and scale the map properly, however, with a conic projection you need to rotate, and as you noted, set the parallels.

Parallels:

There is a documented Austria Lambert Conic Conformal map projection, its specifications can be found here or here. The parallels that likely are correct are in this case are [46,49], though the map you are using could be a custom projection.

Rotation

Now you need to rotate the map, along the x axis by longitude. Conic maps are generally rotated along the x axis and centered on the y axis (see my answer here here for a graphical explanation of why (and how parallels change your projection)).

Rotation moves the world so that your area of interest is aligned properly, such that the central meridian of the map is vertical in your map. Based on the projection specifications noted above, the central meridian should be at 13 degrees, 20 minutes (13.333 degrees), though there is a small disagreement between the two references. Rotation along the x axis is set at the negative of this value.

Using these parameters:

d3.geoConicConformal()
    .parallels([46,49])
    .rotate([-13.333,0])
    .fitSize([width,height],bbox)

I managed a pretty good fit with my very downsampled goto world topojson:

It is possible that the svg image uses parameters that differ slightly from the posted parameters (rounding, typos) or that the parallels are custom selected; however, this should be a fairly tight fit.