Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages:
To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map:
<canvas id="map"></canvas>#map {
position: fixed;
top: 0;
right: 0;
width: 200px;
height: 100%;
z-index: 100;
}pagemap(document.querySelector('#map'), {
viewport: null,
styles: {
'header,footer,section,article': rgba(0,0,0,0.08),
'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: null
});Installation per npm/yarn
$ yarn add pagemap