---
title: "Restrict map panning to an area | JavaScript maps SDK"
description: "Prevent map panning by setting maximum bounds."
---
> 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.
# Restrict map panning to an area
Prevent a map from being panned to a different place by setting [`maxBounds`](https://docs.maptiler.com/sdk-js/api/map/#map#setmaxbounds).
### 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';
// Set bounds to New York, New York
const bounds = [
[-74.04728500751165, 40.68392799015035], // Southwest coordinates
[-73.91058699000139, 40.87764500765852] // Northeast coordinates
];
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-73.9978, 40.7209],
zoom: 13,
maxBounds: bounds // Sets bounds as max
});
```
#### index.html
```html
Restrict map panning to an area
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Restrict map panning to an area
```
## Related examples
### [Disable scroll zoom](https://docs.maptiler.com/sdk-js/examples/disable-scroll-zoom/)
Examples
Prevent scroll actions from zooming your interactive map.
### [Disable map rotation](https://docs.maptiler.com/sdk-js/examples/disable-rotation/)
Examples
Prevent users from rotating your interactive map.
### [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.