pagemap, a mini map navigation for web pages

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

pagemap – minimap for web pages →
pagemap source (GitHub) →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.