[GIS] How to overlay Image to openstreetmap using leaflet.js

coordinate systemleafletopenstreetmap

I want to overlay a wide range satellite image onto openstreetmap using leaflet.js. The satellite image is in Equidistant Cylindrical Projection.

This is how I initiate the layer. 

L.imageOverlay(imgUrl, [[-15, 75], [45, 145]], {opacity: 0.6, autoZIndex: true});

The overlay result is attached below. As you can see, the coastline of the satellite image (in purple color) is not aligned with that of openstreetmap. Is that something wrong with the image or map projection? or I should use other way to overlay the satellite to map ?

enter image description here

Best Answer

Unfortunately your satellite imagery is in equirectangular projection (aka "equidistant cylindrical projection"), whereas OpenStreetMap tiles are in Web Mercator (EPSG:3857) projection, which has a more pronounced vertical stretch.

I do not thing there is anything Leaflet can do to help you with this situation. You can try plotting the latitude parallels to see the discrepancy (top and bottom should match, since you have manually specified the image bounds, but intermediate parallels should be at different positions).

You should either look for a tile source that provides tiles in equirectangular projection as well (EPSG:4326), or have your image converted to Web Mercator.

Related Question