Calculating a bounding box from a location's latitude and longitude

README.md

Calculating a bounding box from a location's latitude and longitude

The example code provides a Javascript implementation of generating a bounding box for a given lat/lng. This is a refactoring of Python code taken from a StackOverflow answer [here])(https://stackoverflow.com/questions/238260/how-to-calculate-the-bounding-box-for-a-given-lat-lng-location)

This example code adds some custom methods to generate images using ArcGIS services.

boundingBoxGenerator.mjs

const degreesToRadians = (d) => Math.PI * d / 180.0;
const radiansToDegrees = (r) => 180.0 * r / Math.PI;

// semi-axes of WGS-84 geoidal reference
const wgs84Major = 6378137.0 // Major semiaxis [m]
const wgs84Minor = 6356752.3 // Minor semiaxis [m]


// earth radius at a given latitude, according to the wgs-84 ellipsoid [m]
function wgs84EarthRadius(lat) {
  const An = wgs84Major * wgs84Major * Math.cos(lat);
  const Bn = wgs84Minor * wgs84Minor * Math.sin(lat);
  const Ad = wgs84Major * Math.cos(lat);
  const Bd = wgs84Minor * Math.sin(lat);

  return Math.sqrt( ( An*An + Bn*Bn )/(Ad * Ad + Bd * Bd ) );
}


/* Bounding box surrounding the point at given coordinates,
 * assuming local approximation of Earth surface as a sphere
 * of radius given by WGS84
 */
function boundingBox(latitudeInDegrees, longitudeInDegrees, halfSideInKm) {
  const lat = degreesToRadians(latitudeInDegrees);
  const lon = degreesToRadians(longitudeInDegrees);
  const halfSide = 1000 * halfSideInKm;

  // Radius of Earth at given latitude
  const radius = wgs84EarthRadius(lat);
  // Radius of the parallel at given latitude
  const parallelRadius = radius * Math.cos(lat);

  const latMin = lat - halfSide/radius;
  const latMax = lat + halfSide/radius;
  const lonMin = lon - halfSide/parallelRadius;
  const lonMax = lon + halfSide/parallelRadius;

  const bbox = [
    radiansToDegrees(lonMin),
    radiansToDegrees(latMin),
    radiansToDegrees(lonMax),
    radiansToDegrees(latMax),
  ];

  return bbox;
}

function getBoundingBoxString (lat, lng, halfSideInKm) {
  return  boundingBox(lat,lng,halfSideInKm).join(',');
}

function getImageryStaticUrl ( lat, lng, halfSideInKm ) {
  const bboxString = getBoundingBoxString(lat, lng, halfSideInKm);
  const pixelWidth = 400;

  const imageryUrl = `https://geodata.md.gov/imap/rest/services/Imagery/MD_SixInchImagery/ImageServer/exportImage?bbox=${bboxString}&bboxSR=4326&size=${pixelWidth}%2C${pixelWidth}&imageSR=&time=&format=png24&pixelType=U8&noData=&noDataInterpretation=esriNoDataMatchAny&interpolation=+RSP_BilinearInterpolation&compression=&compressionQuality=&bandIds=&mosaicRule=&renderingRule=&f=image`
  return imageryUrl;
}


function getStreetMapStaticUrl (lat, lng, halfSideInKm) {
  const bboxString = getBoundingBoxString(lat, lng, halfSideInKm);
  const pixelWidth = 400;
  
  const smUrl = `https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer/export?bbox=${bboxString}&bboxSR=4326&size=${pixelWidth}%2C${pixelWidth}&f=image`

  return smUrl;
}


export { getImageryStaticUrl, getStreetMapStaticUrl, getBoundingBoxString };

index.mjs

import {
  getStreetMapStaticUrl,
  getImageryStaticUrl,
  getBoundingBoxString
} from './boundingBoxGenerator.mjs';

const lat = 39.089972;
const lng = -76.757349;
const halfSizeInKm = 0.1;

const testStreetMap  = getStreetMapStaticUrl( lat, lng, halfSizeInKm );
const testImageryMap  = getImageryStaticUrl( lat, lng, halfSizeInKm );
const testBBox = getBoundingBoxString( lat, lng, halfSizeInKm );

console.log( 
  `Street Map:\n ${testStreetMap}\n\n`,
  `Imagery Map:\n ${testImageryMap}\n\n`,
  `Bounding Box:\n (lng first): ${testBBox}\n\n`,
 )