I want to check the boundaries of my map, so that i can apply cluster according to the boundaries. var bounds = map.getBounds(); var ne = bounds.getNorthEast(); // LatLng of the north-east corner var sw = bounds.getSouthWest(); // LatLng of the south-west corner

I want to check the boundaries of my map, so that i can apply cluster according to the boundaries. var bounds = map.getBounds(); var ne = bounds.getNorthEast(); // LatLng of the north-east corner var sw = bounds.getSouthWest(); // LatLng of the south-west corner

• javascript
• react-native

5 Answers 5

You can use getMapBoundaries const data = await map.current.getMapBoundaries();

<MapView ref={map}

I have cleared my issue by finding the zoom level through the latitudeDelta and longitudeDelta.

let zoom = Math.round(Math.log(360 / region.longitudeDelta) / Math.LN2); this.zoom = zoom;

Edited

const getBoundingBox = (region) => ([
  region.longitude - region.longitudeDelta, // westLng - min lng
  region.latitude - region.latitudeDelta, // southLat - min lat
  region.longitude + region.longitudeDelta, // eastLng - max lng
  region.latitude + region.latitudeDelta // northLat - max lat
])

export const getBoundByRegion = (region, scale = 1) => {
  /*
   * Latitude : max/min +90 to -90
   * Longitude : max/min +180 to -180
   */

  const latOffset = (region.latitudeDelta / 2) * scale;
  const lngD =
    region.longitudeDelta < -180
      ? 360 + region.longitudeDelta
      : region.longitudeDelta;
  const lngOffset = (lngD / 2) * scale;

  return {
    minLng: calcMinLngByOffset(region.longitude, lngOffset), // westLng - min lng
    minLat: calcMinLatByOffset(region.latitude, latOffset), // southLat - min lat
    maxLng: calcMaxLngByOffset(region.longitude, lngOffset), // eastLng - max lng
    maxLat: calcMaxLatByOffset(region.latitude, latOffset), // northLat - max lat
  };
};

const calcMinLatByOffset = (lng: number, offset: number) => {
  const factValue = lng - offset;
  if (factValue < -90) {
    return (90 + offset) * -1;
  }
  return factValue;
};

const calcMaxLatByOffset = (lng: number, offset: number) => {
  const factValue = lng + offset;
  if (90 < factValue) {
    return (90 - offset) * -1;
  }
  return factValue;
};

const calcMinLngByOffset = (lng: number, offset: number) => {
  const factValue = lng - offset;
  if (factValue < -180) {
    return (180 + offset) * -1;
  }
  return factValue;
};

const calcMaxLngByOffset = (lng: number, offset: number) => {
  const factValue = lng + offset;
  if (180 < factValue) {
    return (180 - offset) * -1;
  }
  return factValue;
};

credit: https://github./react-native-maps/react-native-maps/issues/356

This is the solution i found and it works well on both android and ios.

import React, { useCallback, useRef } from "react";
import MapView, { PROVIDER_GOOGLE, type Region } from "react-native-maps";

const Map = () => {
  const mapRef = useRef<MapView>(null);

  const onMapRegionChange = useCallback(
    (region: Region) =>
      console.log(mapRef.current?.boundingBoxForRegion(region)),
    [],
  );

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      showsUserLocation={true}
      onRegionChangeComplete={onMapRegionChange}
      ref={mapRef}
    />
  );
};
export default Map;

Gives:

{"northEast": {"latitude": 47.54443666610619, "longitude": 77.47557650000009}, "southWest": {"latitude": 20.701532546532107, "longitude": 60.600565500000144}}