---
title: "How to keep the map view with the URL hash | JavaScript maps SDK"
description: "Synchronize map view position with the page URL hash."
---
# How to keep the map view with the URL hash
To maintain the map view in the URL hash, you can utilize the `hash:true` option in the map constructor. This feature is particularly valuable for sharing links that lead to a specific map view or loading the map with a predetermined view other than the default.
By implementing this functionality, the map’s position, including zoom level, center latitude, center longitude, bearing, and pitch (`#zoom/latitude/longitude/bearing/pitch`), will be synchronized with the hash fragment in the URL of the page. For instance, you can have a URL like: `http://path/to/my/page.html#15.21/46.234453/6.055004/23.2/57`.
This allows users to share and retrieve a particular map view by simply copying and pasting the URL. Whether it’s for sharing, bookmarking, or customizing default map views, leveraging the URL hash feature is an excellent way to enhance the user experience and improve map navigation.
### 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', // container's id or the HTML element in which the SDK will render the map
style: MapStyle.STREETS,
center: [16.62662018, 49.2125578], // starting position [lng, lat]
zoom: 14, // starting zoom
hash: true //keep the map view with the URL hash
});
```
#### index.html
```html
How to keep the map view with the URL hash | 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 map with URL hash
```
## Related examples
### [Hide map navigation controls](https://docs.maptiler.com/sdk-js/examples/navigation/)
Tutorials
Hide the map navigation and zoom controls.
### [Geolocate control (GPS)](https://docs.maptiler.com/sdk-js/examples/geolocate-control/)
Tutorials
Enable GPS location tracking using the geolocate map control.
### [Get coordinates of the mouse pointer](https://docs.maptiler.com/sdk-js/examples/mouse-position/)
Examples
Show mouse position on hover with coordinates.
### [Learn the basics](https://docs.maptiler.com/sdk-js/examples/how-to-use/)
Tutorials
This tutorial shows how to create a map and display it on a web page using MapTiler.