# How to align vector layers with JS for Leaflet map?

**URL:** <https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013>\
**Category:** Help\
**Created:** [April 5, 2020, 3:52pm UTC](https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013 "2020-04-05T15:52:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 5, 2020, 3:52pm UTC](https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013/1 "2020-04-05T15:52:50Z")

</div>

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)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/71e8825cee02489838fb7faccb0bed325249cba2.png)

And here’s a notebook:

> **[Layer Projection Issues](https://observablehq.com/d/acd854a842d7e99d)**
>
> An Observable notebook by Aaron Kyle Dennis.

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?

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 6, 2020, 8:44am UTC](https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013/2 "2020-04-06T08:44:41Z")

</div>

I’ve shared a notebook here [https://observablehq.com/d/e1d04d9df100c02a](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.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [April 6, 2020, 12:55pm UTC](https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013/3 "2020-04-06T12:55:11Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [April 6, 2020, 1:09pm UTC](https://talk.observablehq.com/t/how-to-align-vector-layers-with-js-for-leaflet-map/3013/4 "2020-04-06T13:09:50Z")

</div>

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.