Getting Radius

[Diliru96]

Hi! How can I get the view radius of the map component according to the zoom level?

[joobacca]

You can get the bounds of the map instance using map.getBounds(), and then use this function/formula:

function getBoundsRadius(bounds) {
  // r = radius of the earth in km
  const r = 6378.8;
  // degrees to radians (divide by 57.2958)
  const neLat = bounds.getNorthEast().lat() / 57.2958;
  const neLng = bounds.getNorthEast().lng() / 57.2958;
  const cLat = bounds.getCenter().lat() / 57.2958;
  const cLng = bounds.getCenter().lng() / 57.2958;
  // distance = circle radius from center to Northeast corner of bounds
  const radius =
    r *
    Math.acos(
      Math.sin(cLat) * Math.sin(neLat) +
        Math.cos(cLat) * Math.cos(neLat) * Math.cos(neLng - cLng),
    );
  return radius; // radius in meters
}

[Diliru96]

Hey! Thank you very much it solved my problem!!!

[lucksp]

I found today, the hard way, that the radius only really works if your viewport is a perfect circle. You likely want a radius of your viewable area only. If this is the case, you can utilize the google calculation computeDistanceBetween method. And then check your lat/lng viewport bounds:

 const getRadius = (): number | null => {
    const bounds = state.mapInstance?.getBounds();
    if (!bounds) return null;

    // computeDistanceBetween returns meters
    const nsRadius = google.maps.geometry.spherical.computeDistanceBetween(
      bounds.getCenter(),
      new google.maps.LatLng(
        bounds.getNorthEast().lat(),
        bounds.getCenter().lng()
      )
    );
    const ewRadius = google.maps.geometry.spherical.computeDistanceBetween(
      bounds.getCenter(),
      new google.maps.LatLng(
        bounds.getCenter().lat(),
        bounds.getNorthEast().lng()
      )
    );

    const radius = nsRadius <= ewRadius ? nsRadius : ewRadius;
// convert back to miles
    return Number((radius * 0.000621371).toFixed(2));