---
title: "Fit to the bounds of a lineString | JavaScript maps SDK"
description: "Get the bounds of a lineString."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Fit to the bounds of a lineString
Get the bounds of a LineString by passing its first coordinates to [`LngLatBounds`](https://docs.maptiler.com/sdk-js/api/geography/#lnglatbounds) and chaining [`extend`](https://docs.maptiler.com/sdk-js/api/geography/#lnglatbounds#extend) to include the last coordinates.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
// A GeoJSON object with a LineString route from the White House to Capitol Hill
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'properties': {},
'coordinates': [
[-77.0366048812866, 38.89873175227713],
[-77.03364372253417, 38.89876515143842],
[-77.03364372253417, 38.89549195896866],
[-77.02982425689697, 38.89549195896866],
[-77.02400922775269, 38.89387200688839],
[-77.01519012451172, 38.891416957534204],
[-77.01521158218382, 38.892068305429156],
[-77.00813055038452, 38.892051604275686],
[-77.00832366943358, 38.89143365883688],
[-77.00818419456482, 38.89082405874451],
[-77.00815200805664, 38.88989712255097]
]
}
}
]
};
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-77.0214, 38.897],
zoom: 12
});
map.on('load', function () {
map.addSource('LineString', {
'type': 'geojson',
'data': geojson
});
map.addLayer({
'id': 'LineString',
'type': 'line',
'source': 'LineString',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#BF93E4',
'line-width': 5
}
});
document
.getElementById('zoomto')
.addEventListener('click', function () {
// Geographic coordinates of the LineString
const coordinates = geojson.features[0].geometry.coordinates;
// Pass the first coordinates in the LineString to `lngLatBounds` &
// wrap each coordinate pair in `extend` to include them in the bounds
// result. A variation of this technique could be applied to zooming
// to the bounds of multiple Points or Polygon geomteries - it just
// requires wrapping all the coordinates with the extend method.
const bounds = coordinates.reduce(function (bounds, coord) {
return bounds.extend(coord);
}, new maptilersdk.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, {
padding: 20
});
});
});
```
#### index.html
```html
Fit to the bounds of a LineString
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Fit to the bounds of a LineString
```
## Related examples
### [Fit a map to a bounding box](https://docs.maptiler.com/sdk-js/examples/fitbounds/)
Examples
Fit map to a specific area using fitBounds method.
### [Restrict map panning to an area](https://docs.maptiler.com/sdk-js/examples/restrict-bounds/)
Examples
Prevent map panning by setting maximum bounds.
### [Fly to a location](https://docs.maptiler.com/sdk-js/examples/flyto/)
Examples
Smoothly interpolate between locations using the flyTo animation.
### [Center map by visitor’s country IP](https://docs.maptiler.com/sdk-js/examples/ip-country-map/)
Tutorials
This tutorial shows how to center map based on the visitor’s country bounds using the MapTiler Geolocation API.