I'm wondering whether it would be possible to somehow overlay a 3rd party, changing non-georeferenced image such as:

enter image description here

If the image was static, I'd use mapwarper.net. But it's not. So is there a way to add coordinates to the image's corners, then bend it on the fly, allowing it to be overlaid?


Confirming that ImageOverlay works:

enter image description here

  • 1
    The bounds are always the same, right? Just the image changes? So could you just use leafletjs.com/reference.html#imageoverlay ? – BradHards Dec 1 '14 at 7:24
  • Ha! Yes, that looks exactly right. I didn't think of looking in Leaflet itself - thought it would require something more. Make your comment an answer and you win the prize.. – Steve Bennett Dec 2 '14 at 6:04

Because of the way the BoM appears to produce those images, the "content" will always be in the same locations in geographic space, and in the same location in pixel space.

So you should be able to use a Leaflet JS image overlay, specifying whatever turns out to be the equivalent of the outer bounds of the source PNG for the imageBounds argument.

An alternative would be to pre-process the image yourself (perhaps to remove the collar), but I'm pretty confident you'd need more than Leaflet for that - gdal_warp or similar. That is the direction I'm heading, because I want to serve this type of image as time/elevation data from GeoServer.

  • Thanks! Yeah, pre-processing the image would almost certainly require server-side processing, which just makes everything a bit more complicated. – Steve Bennett Dec 3 '14 at 6:33

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.