1

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

1 Answer 1

2

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.

3
  • Ic. How to overlay tiles in equirectangular projection ? ... Do you any example? I need to have some simple basemap like openstreetmap.
    – kkkkky
    Dec 18, 2015 at 9:09
  • Once you find tiles in the correct projection, it should be as easy as specifying to Leaflet the correct map CRS. Unfortunately I am not aware of a service that provides tiles in that projection?
    – ghybs
    Dec 18, 2015 at 10:17
  • Oh ok I try the way to convert satellite image to EPSG:3857. Thank you so much @Ghybs!
    – kkkkky
    Dec 22, 2015 at 2:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.