2

I'm in the middle of transitioning away from Google Maps and to Leaflet due to the recent change in Google Maps usage policy. I've converted all but one of my map pages, but unfortunately, that one is the most popular.

I must be missing something obvious, because the image overlay displays correctly on Google Maps, but taking the exact same bounds/images and putting them into Leaflet causes a shift. I've read in other answers that such subtle shifts are caused by coordinate conversion problems, but everything I'm reading says that Google Maps and Leaflet use the same coordinate system. What am I missing?

Here's an example of the Google Maps page: https://www.rabbitears.info/contour.php?appid=8a441da96f4148f5b2c9cf6212b6c0ea&site=1&map=Y

And here's an example of the Leaflet page: https://www.rabbitears.info/contour_leaflet.php?appid=8a441da96f4148f5b2c9cf6212b6c0ea&site=1&map=Y

You can see the overlay has shifted slightly northward, enough so that the image (television station coverage area) no longer lines up with the terrain.

Improve this question

1 Answer 1

Reset to default
0

Welcome to GIS SE!

While it is true that both Google Maps and Leaflet use by default the same coordinates system (i.e. WGS84) and projection (Web Mercator / EPSG:3857), they do not manage overlays exactly the same way:

  • Google Maps Ground Overlays are distorted so that they fit the map projection:

    The image will be rendered on the map, constrained to the given bounds, and conformed using the map's projection.

  • Leaflet ImageOverlay is rendered "as-is", i.e. the image must be already in the appropriate projection.

    Used to load and display a single image over specific bounds of the map.

Your image is quite big: bounds [[36, -81], [40, -76]], i.e. about 444 km x 426 km

Therefore you start seeing the effect of this absence of projection: high latitudes being rendered bigger in Web Mercator, your image is stretched towards those, and the center of your image looks "drifted" towards higher latitude, whereas its top and bottom are properly aligned, as in that other example: How to overlay Image to openstreetmap using leaflet.js

The normal solution is to reproject your image for Leaflet usage. You should find plenty posts here about that topic.

Unfortunately I do not think there is any Leaflet plugin (yet) to rework your image client-side like Google Maps does.

Improve this answer
4
  • Thanks for the feedback on this. I hadn't quite caught the subtle difference in the documentation, and that makes sense. A day or two ago, I found a post that explained exactly how to do the reprojection with gdal_translate and gdalwarp and managed to create a proof of concept image that does correct the issue. That said, I'm wary of reprocessing the 57,000+ maps I have given the amount of time and processing power that will take, but that may be the only option. I'm guessing something like Proj4js won't do what's needed here, am I right?
    – Trip
    Commented Oct 24, 2018 at 0:41
  • Indeed, Proj4js would only help on the coordinates projection part, then you would still need to process your image. OpenLayers has something built-in for that: openlayers.org/en/latest/doc/tutorials/raster-reprojection.html
    – ghybs
    Commented Oct 24, 2018 at 0:50
  • Well, I had narrowed my choice to Leaflet or OpenLayers, and picked Leaflet because it looked simpler to work with. Now I'm wondering if I should redo all the work I just did and move everything again to OpenLayers to avoid the work of reprojecting all the images. (If I was a better programmer, I'd try to write a plugin based on what I see in the OpenLayers source code...)
    – Trip
    Commented Oct 24, 2018 at 1:48
  • I'm in the midst of reprojecting all my maps. I couldn't get OpenLayers to do anything I needed it to do after several hours of staring at it, and I just found Leaflet to be more visually appealing and friendlier to work with. Thanks for your help.
    – Trip
    Commented Nov 1, 2018 at 9:46

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.