pagemap

mini map for web pages

1.2.0

Mini map for web pages. You can find an example on this web site in the top right corner. And there are two more demo pages: boxes and text.

Example usage

add a canvas tag to your HTML page:

<canvas id='map'></canvas>

fix it's position on the screen:

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

init and style the mini map:

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
});
Works best with JavaScript enabled!Works best in modern browsers!