---
title: "boundsOfGeoJSON"
description: "Scan all coordinates of any GeoJSON to compute its bounding box, ready to pass directly to map.fitBounds."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/utils/geometry"
---
# boundsOfGeoJSON

> Scan all coordinates of any GeoJSON to compute its bounding box, ready to pass directly to map.fitBounds.

## Introduction

`boundsOfGeoJSON` scans all coordinates of any GeoJSON (feature / geometry / collection / geometry collection) to compute the southwest and northeast corners of its bounding box, returning a tuple that can be passed directly to `map.fitBounds`. Returns `undefined` when no coordinates are found. Commonly used to zoom the viewport to fit a set of data. [useMapboxCamera](https://mapbox.mhaibaraai.cn/docs/composables/use-mapbox-camera) calls this internally when `fitBounds` receives a GeoJSON.

Import from `@movk/mapbox/utils/geometry` (not auto-imported).

## Usage

Compute the bounding box of a polyline and zoom to that extent, using a rectangle to visualize the bounds:

```vue [GeometryBoundsExample.vue]
<script setup lang="ts">
import { boundsOfGeoJSON } from '@movk/mapbox/utils/geometry'
import type { FeatureCollection } from 'geojson'

const mapId = 'geometry-bounds-demo'

const data: FeatureCollection = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: [[116.39, 39.91], [117.20, 39.13], [118.18, 39.63], [119.60, 39.94]]
      }
    }
  ]
}

const bounds = boundsOfGeoJSON(data)

// 把包围盒元组转成矩形要素用于可视化
const bbox: FeatureCollection | undefined = bounds && {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'Polygon',
      coordinates: [[
        [bounds[0][0], bounds[0][1]], [bounds[1][0], bounds[0][1]],
        [bounds[1][0], bounds[1][1]], [bounds[0][0], bounds[1][1]], [bounds[0][0], bounds[0][1]]
      ]]
    }
  }]
}

const { fitBounds } = useMapboxCamera({ mapId })
</script>

<template>
  <div class="relative h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MapboxMap :map-id="mapId" :options="{ style: 'mapbox://styles/mapbox/light-v11', center: [117.5, 39.6], zoom: 6 }">
      <MapboxLayer layer-id="geo-line" type="line" :source="{ type: 'geojson', data }" :paint="{ 'line-color': '#8b5cf6', 'line-width': 3 }" />
      <MapboxSource v-if="bbox" source-id="geo-bbox" :source="{ type: 'geojson', data: bbox }">
        <MapboxLayer layer-id="geo-bbox-line" type="line" source="geo-bbox" :paint="{ 'line-color': '#f59e0b', 'line-width': 1, 'line-dasharray': [2, 2] }" />
      </MapboxSource>
    </MapboxMap>
    <div class="absolute left-2 top-2 z-10">
      <UButton size="sm" :disabled="!bounds" @click="bounds && fitBounds(bounds, { padding: 40 })">
        缩放到包围盒
      </UButton>
    </div>
  </div>
</template>
```

## API

### `boundsOfGeoJSON()`

Compute the bounding box of a GeoJSON.

**input** (`GeoJSON`) *required*: Any GeoJSON object.

Returns `LngLatBoundsTuple | undefined`: a `[[west, south], [east, north]]` tuple; `undefined` when no coordinates exist.

### `LngLatBoundsTuple`

Southwest / northeast bounding box: `[[number, number], [number, number]]`, ready to pass directly to `map.fitBounds`.

## Changelog

See commit history for [src/runtime/utils/boundsOfGeoJSON.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/boundsOfGeoJSON.ts).


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.