---
title: "Navigate the map with game-like controls | JavaScript maps SDK"
description: "Navigate map using keyboard arrow keys with game controls."
---
> 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.
# Navigate the map with game-like controls
Use the keyboard’s arrow keys to move around the map with game-like controls.
### 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.TOPO,
center: [-87.6298, 41.8781],
zoom: 17,
bearing: -12,
pitch: 60,
interactive: false
});
// pixels the map pans when the up or down arrow is clicked
const deltaDistance = 100;
// degrees the map rotates when the left or right arrow is clicked
const deltaDegrees = 25;
function easing(t) {
return t * (2 - t);
}
map.on('load', function () {
map.getCanvas().focus();
map.getCanvas().addEventListener(
'keydown',
function (e) {
e.preventDefault();
if (e.which === 38) {
// up
map.panBy([0, -deltaDistance], {
easing: easing
});
} else if (e.which === 40) {
// down
map.panBy([0, deltaDistance], {
easing: easing
});
} else if (e.which === 37) {
// left
map.easeTo({
bearing: map.getBearing() - deltaDegrees,
easing: easing
});
} else if (e.which === 39) {
// right
map.easeTo({
bearing: map.getBearing() + deltaDegrees,
easing: easing
});
}
},
true
);
});
```
#### index.html
```html
Navigate the map with game-like controls
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Navigate the map with game-like controls
```
## Related examples
### [Animate map camera around a point](https://docs.maptiler.com/sdk-js/examples/animate-camera-around-point/)
Examples
Animate the map camera rotating around a specific point.
### [Creates an animated map to fly between different locations](https://docs.maptiler.com/sdk-js/examples/heatmap-animated/)
Examples
Animate map flights between locations using a heatmap layer.
### [Fly to a location based on the scroll position](https://docs.maptiler.com/sdk-js/examples/scroll-fly-to/)
Examples
Fly to locations on the map by scrolling.