I have an image file that I am able to overlay perfectly fine onto my Leaflet map with this code:

var initLat = 38.9761;
var initLon = -77.4875;

var imageUrl = '/weather/nexrad/radar.png';
var imageBounds = [[initLat + 3, initLon + 3], [initLat - 3, initLon - 3]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

But as you can see, I have been trying to simulate a center point for that image overlay by just adding and subtracting 3 from my desired center point (initLat and initLon).

How can I create a Leaflet ImageOverlay using not two corner points, but a center point (in this case 38.9761, -77.4875), and having a zoom value as well to determine the size of that image overlay?

I am perfectly fine with using a bit of math to achieve this, but I haven't been able to figure out how I would use math in this scenario.

  • You need to know the latitude/longitude bounds of your image. You can get these from opengeo.ncep.noaa.gov/geoserver/www/index.html under "This Radar Sites link contains a few attributes for each of the NEXRAD sites." If you click on KABX for example, you get: <BoundingBox CRS="CRS:84" minx="-111.824" miny="30.1492" maxx="-101.8232" maxy="40.15"/>. Note that the Meractor projection doesn't map the same number of pixels per latitude degree, but for small changes in latitude, you can probably get away with assuming otherwise Jun 13 at 14:45
  • I did this once and it might be helpful: github.com/barrycarter/bcapps/blob/master/BCINFO3/usr/local/bin/… Jun 13 at 14:47

1 Answer 1


I think I have found a solution for now. I have tried many things, including some math to find the correct bounding box, I have tried turf.js, all to no avail.

I eventually had the idea to set the leaflet map to a square shape, centered around a point as all maps are, and then just get the bounding box for the map. Here is my code so far:

function setImageFromCenter(zoomLevel, imagePath) {
    var initMapWidth = document.getElementById("map").style.width;
    var initMapHeight = document.getElementById("map").style.height;

    // if the map is fullscreen, exit it
    var yes;
    if (map.isFullscreen()) {
        yes = true;
    if (yes) {

    // sets the map's width and height to be the same as the user's value
    $("#map").css("width", zoomLevel + "px");
    $("#map").css("height", zoomLevel + "px");

    // sets the image overlay to the map's bounds
    var theSquareBounds = map.getBounds();
    L.imageOverlay(imagePath, theSquareBounds).addTo(map);

    // resets the map's initial dimensions
    $("#map").css("height", initMapHeight);
    $("#map").css("width", initMapWidth);

    // if the map was fullscreen, re-enter it
    if (yes) {
//setImageFromCenter(950, '/weather/nexrad/radar.png');

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.