---
title: "Create a non-interactive map | JavaScript maps SDK"
description: "Disable interactivity to create a static map."
---
> 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.
# Create a non-interactive map
The [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/) is a mapping library designed for creating _interactive maps_, but you can also disable the interactivity and simulate a _static map_.
To get a simple non-interactive map, it’s typically much easier and more lightweight to [generate a static map image](https://docs.maptiler.com/guides/maps-apis/static-maps/static-maps-for-your-web/) via our [Static maps API](https://docs.maptiler.com/cloud/api/static-maps/). However, you may prefer to use the SDK JS in these cases:
- You already have a complex interactive map implemented and just want a simple way to switch it to non-interactive.
- You need to add special features and custom data to your map, so the [markers](https://docs.maptiler.com/guides/maps-apis/static-maps/static-map-with-markers/) and [lines](https://docs.maptiler.com/guides/maps-apis/static-maps/static-map-with-lines/) that a static map allows aren’t sufficient.
To make your map non-interactive with MapTiler SDK JS, build your map as usual and then add the parameter `interactive: false`. See the result and code below.
### 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';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-74.5, 40],
zoom: 9,
// causes pan & zoom handlers not to be applied, similar to
// .dragging.disable() and other handler .disable() funtions in Leaflet.
interactive: false,
navigationControl: false,
geolocateControl: false
});
```
#### index.html
```html
Create a non-interactive map | NPM example
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Display a non-interactive map
```
## Related examples
### [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.
### [Hide map navigation controls](https://docs.maptiler.com/sdk-js/examples/navigation/)
Tutorials
Hide the map navigation and zoom controls.
### [Disable scroll zoom](https://docs.maptiler.com/sdk-js/examples/disable-scroll-zoom/)
Examples
Prevent scroll actions from zooming your interactive map.