d3-geo: Is there a way to not show the division between territories spanning 180/-180 degrees of longitude?

18 views Asked by At

The question from the title. I'm running a code with D3-geo, Miller projection with .rotate([-10, 0]);, so The US would be on the left side of the map, and Russia entirely on the right side. However, since there are those Russian little parts that cross the Longitude boundaries of -180/+180 degrees, they have a line dividing the territory, like in the screenshot below, taken from here

Globe example from https://www.d3indepth.com/geographic/

I did some coordination translations of these little parts to their 180+ equivalents, however, I'm not managing to get them correctly as part of the "russian mainland", so to speak. It "kinda worked", but I still got a couple of weird arcs crossing atop of the map in that region. After some hours of trial and error, here I am asking for help.

So, in other words, the question is: How to get rid of that line, without having to touch the topologies file myself?

This is the code I have for translating the coordinates for that region:

    const topo = WorldMap.geojson;      // ne_110m_admin_0_countries_lakes
    const topoFeatures = topo.features; // geojson from Natural Earth

    // Russia's position inside this geoJson is 18...
    const russiaCoordinates = topoFeatures[18].geometry.coordinates;
    const russiaMainlandCoordinates = russiaCoordinates[1][0];
    const russiaWestPartCoordinates: Array<any> = russiaCoordinates.splice(
        11,
        1,
    )[0][0]; //removing the "west part" of russia from coordinates array

    russiaWestPartCoordinates.splice(0, 1); // removing a "NaN" in the beginning
                                            // I don't know why it happens there.

    // translating coordinates
    russiaWestPartCoordinates.forEach((m: number[]) => {
        const lng = m[0];
        const newLng = 180 + (180 - Math.abs(lng));
        m[0] = newLng;
    });

    // the coordinates below, are the ones returned from the array above
    // that are hardcoded here because I was experimenting with them
    const coords = [
        [184.985644985645, 66.58430527154528],
        [185.66028566028567, 66.33564519672518],
        [185.42808542808544, 67.06217714717715],
        [188.14284814284815, 66.91301583134583],
        [190.1005301005301, 65.97724129000127],
        [189.1090891090891, 65.54139157785158],
        [187.46964746964747, 65.43789897687898],
        [187.44516744516744, 64.46079685326686],
        [187.04484704484705, 64.25276977949977],
        [186.1081261081261, 64.28263677172677],
        [185.34600534600534, 64.63131654144652],
        [184.01652401652402, 64.92286700626701],
        [183.7929637929638, 65.35663297477296],
        [182.77740277740278, 65.52020685080686],
        [181.64016164016164, 65.39049380898379],
        [181.0965610965611, 65.7403890958291],
        [181.3140013140013, 66.1121636909337],
        [180.1162801162801, 65.87461691554691],
        [180.56736056736057, 65.40403814266813],
        [180, 64.97964902055901],
        [180, 68.96359322209321],
        [182.45016245016245, 68.20007482196482],
        [185.07168507168507, 67.20595545859544],
    ];

    // I'd place the `russiaWestPartCoordinates` variable here
    // instead of `coords`
    russiaMainlandCoordinates.splice(256, 0, ...coords);

    // my class that wraps d3-geo, receiving the geoJson file and map position.
    const projection = new MillerProjection(topo, svgX, svgY);
0

There are 0 answers