How to design navigation map for web pages using pagemap plugin ?

In this article, we will learn how to design a mini-map for navigation system with single page website using pagemap plugin. This plugin is totally a HTML, JavaScript and CSS based tool.

Please download the pre-compiled library files for code implementation.

The developer can fix the position of the map on the screen by the following CSS code. Add in the style part of the above HTML code.

#map {
 position: fixed;
 top: 0;
 right: 0;
 width: 200px;
 height: 100%;
 z-index: 100;
}

Initialization and styling of mini-map is handled in the script part of the code. The following code snippet is just provided as an example for developers, they can change it as per one's need.

pagemap(document.querySelector('#map'), {
 /* Another HTML container ID */
 viewport: document.querySelector('#container'),
 styles: {
 'h1,a': 'rgba(0,0,0,0.10)',
 'h2,h3,h4': 'rgba(0,0,0,0.08)'
 },
 back: 'rgba(0,0,0,0.02)',
 view: 'rgba(0,0,0,0.05)',
 drag: 'rgba(0,0,0,0.10)',
 interval: 50
});

Example: The following code demonstrates a mini-map for navigating the web page in the top-right corner of the web page. Add a canvas tag to your HTML page.

Output: