Load Leaflet ImageOverlay with center point instead of corners

Question

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.

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) {
        map.toggleFullscreen(fullscreenOptions);
        console.log("exited")
    }

    // 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");
    map.invalidateSize();

    // 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);
    map.invalidateSize();

    // if the map was fullscreen, re-enter it
    if (yes) {
        map.toggleFullscreen(fullscreenOptions);
        console.log("entered")
    }
}
//setImageFromCenter(950, '/weather/nexrad/radar.png');