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


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.

  • Ic. How to overlay tiles in equirectangular projection ? ... Do you any example? I need to have some simple basemap like openstreetmap. – kkkkky Dec 18 '15 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 '15 at 10:17
  • Oh ok I try the way to convert satellite image to EPSG:3857. Thank you so much @Ghybs! – kkkkky Dec 22 '15 at 2:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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