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 install --save @maptiler/sdk

main.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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>How to keep the map view with the URL hash | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Display a map with URL hash</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element in which the SDK will render the map
      style: maptilersdk.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
    });
  </script>
</body>

</html>

How to keep the map view with the URL hash

main.js

index.html

style.css

Hide map navigation controls

Geolocate control (GPS)

Get coordinates of the mouse pointer

Learn the basics

How to keep the map view with the URL hash

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Hide map navigation controls

Geolocate control (GPS)

Get coordinates of the mouse pointer

Learn the basics