How to align vector layers with JS for Leaflet map?

Community Help
1

I’ve been searching for a solution to this issue for while (focusing on QGIS) without much success. Perhaps there’s a simple JavaScript approach?

I received data on some administrative areas that doesn’t line up when viewing overtop most web tile layers. These data came to me from different sources in different projections. One layer appears to be correctly aligned with the tile layers, but the other is slightly off. Using QGIS to re-project both into a common CRS format, there remains the same disparity.

Here’s an image showing the misalignment:

map (3)
map (3)1096×685 30.9 KB

And here’s a notebook:

The re-projected files (in WGS 84) are attached to the notebook.

Does anyone know how I could mess around with the CRS (or otherwise) using JS to bring these layers into alignment?

2

I’ve shared a notebook here https://observablehq.com/d/e1d04d9df100c02a that fixes the GeoJSON with an adjustable rotation. BTW I think a generic GeoJSON transform similar to this would be an important addition to d3-geo-projection.

2 Likes
3

Cool! Thank you, Fil!

It’ll be interesting to see if the offsets for one layer consistently remedy all the others where the projection has gone awry! Thanks too for this visual and interactive means of identifying a correction!

4

I applied a rotation on the spherical coords, which seems to work locally. However it’s possible that the dataset was offset in other ways, for example by reading from a projection with parameters different from those that were used to project initially. Locally it’s possible it matches “close enough”, but there are so many different ways the original data can have been transformed, that it’s probably not going to solve the problem globally.

2 Likes