0

I am trying to generate a bounding box for an image with Leaflet, based upon 3 criteria:

  • Starting Latitude and Longitude (the center of the bounding box)
    • My value for this is 38.9761, -77.4875
  • Radius of the bounding box (the distance from the center to one of the square bounding box's corners)
    • My value for this is 460000 meters (460 km)
  • The bearing to point at
    • To generate a bounding box, you need two corners - I am using the northwest (top left) and southeast (bottom right) corners. I am using geolib's computeDestinationPoint() as such:
var startPoint = { latitude: 38.9761, longitude: -77.4875 };
var distanceMeters = 460000;

var NWbearing = 315;
var NWdest = geolib.computeDestinationPoint(
    startPoint,
    distanceMeters,
    NWbearing
);
var SEbearing = 135;
var SEdest = geolib.computeDestinationPoint(
    startPoint,
    distanceMeters,
    SEbearing
);

var imageBounds = [[NWdest.latitude, NWdest.longitude], [SEdest.latitude, SEdest.longitude]]
L.imageOverlay(circleWithCenter.svg, imageBounds).addTo(imageLayerGroup);

This, at least what I thought, should render my circle on my center point, just with varying sizes based upon the distanceMeters variable. However, it shifts the circle to the side whenever I execute the above code:

The blue marker is where the black dot representing the circle's center should be, but as you can see it's not. Any idea why this is happening, and how I might be able to fix it?

If anybody needs it, the circle with the center dot SVG came from wikipedia here. I've been using it on this page that I made. Simply download the SVG, upload it to that page, click on the KLWX in parentheses, and then click on the image icon on the leaflet map. All of this information, of course, is explaining exactly how I am testing my code.

6
  • Without checking any values my first idea is the problem is mixing projected, and not projected data. If you would project your circle from globe to plain to match projected basemap it won't be circle but a potato.
    – Miro
    Jun 16 at 3:07
  • @Miro That's what I thought as well - that I was trying to project a flat image onto a spherical earth, or rather, the points that were calculated for the bounding box were calculated taking into account the curved surface of the earth. Any idea how to fix this, or how to modify the formula? Here is the code for the specific function I am using in geolib: github.com/manuelbieh/geolib/blob/master/src/… Jun 16 at 3:10
  • It really depends what is your goal after all. For whatever you try to achieve/calculate, you need to take into account that the basemap is mercator projection (simple cylindrical projection). Depending on how you look at it, you might say your bounding box is being calculated correctly.
    – Miro
    Jun 16 at 3:21
  • @Miro I do think that the bounding box is being generated correctly based upon what I am giving it. However, I just want to generate a bounding box that will keep its center consistent, even if you were to resize it. I figured that should be possible, even on a Mercator projection, no? Jun 16 at 3:25
  • If your goal is to keep center consistent you need to do your calculation a bit more complicated, definitely not calculating the corners by diagonal distance, but instead vertical and horizontal, and then average or max or min difference in vertical difference of latitude.
    – Miro
    Jun 16 at 3:36

1 Answer 1

1

Looking at geolib you can use built-in function:

var startPoint = { latitude: 38.9761, longitude: -77.4875 };
var distanceMeters = 460000;
// Returns an array with the southwestern and northeastern coordinates
var bounds = geolib.getBoundsOfDistance(startPoint, distanceMeters)

Using these bounds will overlay image over the 460 km radius area of the starting point. But sure won't be centered to the start point due to Mercator projection.

If the goal is to display boundary of 460 km radius in the map around the starting point, you can't do it with image overlay (L.imageOverlay), but instead create polygon as buffer around the starting point and add it as L.polygon.

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.