Calculate region from bounds

Question

I need to transform a (google maps) bounds object to a region object.

Sample bounds:

{
  northeast: {
    lat: 47.5085913,
    lng: 19.2656781
  },
  southwest: {
    lat: 47.4179006,
    lng: 19.0494985
  }
}

Sample region:

{
  // centre of bounds
  latitude,
  longitude,

  // delta of the centre in order to fit the original bounds
  latitudeDelta,
  longitudeDelta,
}

What I've achieved so far:

const bounds2region = bounds => {
  const earthRadiusInKM = 6371 // km
  const radiusInKM = 1
  const aspectRatio = 1
  const [ latitude, longitude ] = bounds2center(bounds)
  const radiusInRad = radiusInKM / earthRadiusInKM
  const longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)))
  const latitudeDelta = aspectRatio * rad2deg(radiusInRad)

  return {
    latitude,
    longitude,
    latitudeDelta,
    longitudeDelta,
  }
}

const bounds2center = bounds =>
  toArrayIfObject(bounds)
    .reduce((coordinate1, coordinate2) => {
      const c1 = toArrayIfObject(coordinate1)
      const c2 = toArrayIfObject(coordinate2)

      return [
        average([c1[0], c2[0]]),
        average([c1[1], c2[1]]),
      ]
    })

const average = numbers => numbers.reduce((sum, n) => sum + n, 0) / numbers.length
const deg2rad = n => n * Math.PI / 180
const rad2deg = n => n / Math.PI * 180
const toArrayIfObject = object => typeof object === 'object' ? Object.values(object) : object

It works partially: It moves the map to the centre of the bounds, but crops or zooms out too much. I'm not sure how to set the deltas (latitudeDelta, longitudeDelta). I guess I need to calculate a value for the aspectRatio instead of setting it to 1.

Answer 1

Ok, after some more surfing I managed to patch up a solution:

const earthRadiusInMetre = 6371e3

const boundsToRegion = (bounds, aspectRatio = 1, margin = 1) => {
  const [ latitude, longitude ] = boundsToCenter(bounds)
  const R = (calculateDistance(bounds[0], { latitude, longitude })) * margin

  return {
    latitude,
    longitude,
    ...calculateRegionDelta({ latitude }, R, aspectRatio),
  }
}

const calculateRegionDelta = ({ latitude }, radiusInMetre, aspectRatio = 1) => {
  const radiusInRad = radiusInMetre / earthRadiusInMetre
  const longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)))
  const latitudeDelta = aspectRatio * rad2deg(radiusInRad)

  return {
    latitudeDelta,
    longitudeDelta,
  }
}

const boundsToCenter = bounds =>
  bounds.reduce((coordinate1, coordinate2) => [
    average([coordinate1.latitude, coordinate2.latitude]),
    average([coordinate1.longitude, coordinate2.longitude]),
  ])

const calculateDistance = (coord1, coord2) => {
  const R = earthRadiusInMetre
  const lat1 = coord1.latitude
  const lat2 = coord2.latitude
  const lon1 = coord1.longitude
  const lon2 = coord2.longitude
  const φ1 = deg2rad(lat1)
  const φ2 = deg2rad(lat2)
  const Δφ = deg2rad(lat2 - lat1)
  const Δλ = deg2rad(lon2 - lon1)

  const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))

  return R * c
}

const deg2rad = n => n * Math.PI / 180

const rad2deg = n => n / Math.PI * 180

const average = numbers => numbers.reduce((sum, n) => sum + n, 0) / numbers.length

The function boundsToRegion takes an array of 2 coordinates as bounds, an aspect ratio, and a margin parameter.

Example:

const bounds = Object.values(boundsObject).map(coordinate => ({
    latitude: coordinate.lat,
    longitude: coordinate.lng,
  }))

const region = boundsToRegion(bounds, aspectRatio, 2)

Resource: set-the-bounds-of-a-mapview