Mini map for web pages.

Overview

pagemap

license web github npm
version downloads

Mini map for web pages.

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
});

License

The MIT License (MIT)

Copyright (c) 2020 Lars Jung (https://larsjung.de)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • ReferenceError: rgba is not defined

    ReferenceError: rgba is not defined

    When I try to use the demo (text.html) with the init code from the example:

    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
    });
    

    my console throws a ReferenceError: rgba is not defined

    If I use the simpler init code from the text demo this doesn't happen:

    pagemap(document.querySelector('#map'));
    

    Maybe I just overlooked something – any pointers? Are there possible dependencies?

    On a different topic: I had a hard time finding out that pagemap needs to be imported at bottom, maybe you could add a hint in the readme to avoid other people the hassle.

    opened by atoav 3
  • Map works but there's no content

    Map works but there's no content

    I have the map in my app, but it doesn't show the contents. I can click around in the map and the page will scroll, and when I scroll the box in the map moves with me. That works great, but it's empty.

    I suspect it has to do with my content. All of my elements are either position: fixed or position: absolute with custom top and left params. Does this know how to handle all that?

    Here's an example of what I got: https://timeline.starwars.guide/?minimap=true#year=0

    You'll see the map in the lower right. If you open dev toolbar and go to Minimap.js in the source, you can see the code I'm using. It's also here: https://github.com/DavidLozzi/starwars-timeline/blob/master/src/organisms/Minimap/Minimap.js

    Thanks

    opened by DavidLozzi 1
  • Bump elliptic from 6.5.2 to 6.5.3

    Bump elliptic from 6.5.2 to 6.5.3

    Bumps elliptic from 6.5.2 to 6.5.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Cannot color pagemap

    Cannot color pagemap

    Hi @lrsjng,

    thanks for this javascript library.. looks very good. I am having problems styling the elements in color (e.g. drawing slightly red boxes or something). looks like all colors are grayscaled.

    opened by gizmomogwai 1
  • Cannot read property 'style' of null

    Cannot read property 'style' of null

    I've initiated pagemap as your instructions. and it's showing and all. but whenever I try to click on it and drag (like you do with scrollbar), it doesn't work as demo page and throws an error into console.

    pagemap0.4.0.min.js:2 Uncaught TypeError: Cannot read property 'style' of null
        at HTMLCanvasElement.j (pagemap0.4.0.min.js:2)
    j @ pagemap0.4.0.min.js:2
    

    What would be the issue here and how can I fix it? Im using wordpress and I've put map canvas like below

    <canvas id='map'></canvas>
    		<?php
    		global $post;
    		$pageId = $post->ID; 
    		$post = get_post($pageId); 
    		$content = apply_filters('the_content', $post->post_content); 
    		echo $content;  
    		?>
    

    Is there any way to fix this? also I included pagemap js before my custom js file and before jquery (if this helps)

    opened by vishvega 1
  • Make getOffset usable for SVG elements

    Make getOffset usable for SVG elements

    Hi Lars,

    Pagemap didn't work in my use case with SVG tags, so I patched Rect.getOffset to return the width and height of the bounding box, and use it in Rect.ofElement instead of the offset{Width,Height} of el.

    I sadly don't have any time to make proper testing but I hope this little change might enable SVG support in Pagemap.

    Thanks for your work and your sharing !

    opened by janroudaut 1
  • 0

    0

    Mi dirección pública para recibir AAVE 0xb0ed172Ff84ADC9d522DE559Be59915054F37788

    Págame a través de Trust Wallet: https://link.trustwallet.com/send?coin=60&address=0xb0ed172Ff84ADC9d522DE559Be59915054F37788&token_id=0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9

    opened by jesus-campo 0
  • Bottom of pagemap not showing

    Bottom of pagemap not showing

    Hi,

    I'm not very familiar with JS. When I copy the raw code to my site the map doesn't show the bottom bound. When I drag the box it expands and contracts but the bottom is stuck to the maximum boundary set by the map of the page.

    Here is a snippet of my code: https://codepen.io/magix430/pen/dEQxqJ

    Thanks in advance, Kelvin

    opened by magix430 0
  • Ask for Raw Source Code not Minified

    Ask for Raw Source Code not Minified

    Hello, lrsjng.

    I am Using your pagemap library for my company project, Thanks.

    Can I ask to get not minified source code for 0.4.0 ver ? There exists a raw source code file but I guess that is different version with current one.

    if it possible, Please commit with full source of 0.4.0 version Thanks.

    opened by walt1992 0
  • Fix HTML typo in README

    Fix HTML typo in README

    This fixes a HTML typo in README where the id attribute in HTML canvas tag had a # before starting.

    You need also to fix this in the website: https://larsjung.de/pagemap/

    opened by dgadelha 0
  • Making scale of x and y independent of each other

    Making scale of x and y independent of each other

    Using the minimum value of the scale of x and y caused the minimap not to be properly displayed. By computing those scales independently the problem was fixed.

    opened by eltonfss 0
  • Changing styles of view port

    Changing styles of view port

    I want to change the style of viewport as it becomes too small when my screen height reaches upto 10000px

    pagemap(document.querySelector('#map'), { viewport: null, styles: { '.node': 'rgba(0, 0, 0, 0.08)', '.link': 'rgba(63, 81, 181, 0.08)', }, back: null, view: 'rgba(0,0,0,0.05)', drag: 'rgba(0,0,0,0,0.10)', //back: 'rgba(0, 0, 0, 0.08)', interval: 50, });

    opened by pmehta18 0
  • Improve

    Improve "Getting Started" documentation

    Hey, this little thing is cool!

    To help more people use it, I think it would be helpful to include (at least) a recommended way to add the library as a dependency to your project (e.g. es6 import or html <script>).

    You could also consider a React-specific component example, like this:

    import React, { useState, useEffect } from 'react'
    import pagemap from 'pagemap'
    
    const PageMapWrapper = ({ children }) => {
        const [mapShowing, setMapShowing] = useState(false)
        useEffect(() => {
            if (!mapShowing) {
                pagemap(document.querySelector('#pagemap'), {
                    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
                })
                setMapShowing(true)
            }
        })
    
        return (
            <div>
                <canvas id="pagemap" />
                {children}
            </div>
        )
    }
    
    export default PageMapWrapper
    
    opened by sgb-io 1
  • Exclude Elements

    Exclude Elements

    Hi, is there a way to exclude elements, or better to create the map from just the content element? I tried the viewport option, but then the map is not draggable. Did I miss something?

    opened by marcus-at-localhost 4
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Extend GitHub pages with support for LaTeX, plotly, etc.

Extend GitHub pages with support for LaTeX, plotly, etc. xhub is a browser extension for Google Chrome that lets you use various add-ons on GitHub REA

Nico Schlömer 71 Dec 11, 2022
Processing Foundation 18.6k Jan 1, 2023
A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 2022
Composable data visualisation library for web with a data-first approach now powered by WebAssembly

What is Muze? Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It

Charts.com 1.2k Dec 29, 2022
Web UI for PrestoDB.

Airpal Airpal is a web-based, query execution tool which leverages Facebook's PrestoDB to make authoring queries and retrieving results simple for use

Airbnb 2.8k Jan 5, 2023
Web UI for Impala

Bloomery Bloomery is an open source query execution tool for Impala. It uses node-impala which provides communication between Impala and Node client u

Ömer Ufuk Efendioğlu 15 Feb 18, 2022
Analytical Web Apps for Python, R, Julia, and Jupyter. No JavaScript Required.

Dash Dash is the most downloaded, trusted Python framework for building ML & data science web apps. Built on top of Plotly.js, React and Flask, Dash t

Plotly 17.9k Jan 4, 2023
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Ian Webster 1.3k Dec 25, 2022
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
A web application to 🔍inspect your GitHub Profile Stats📊 in a lucid way. Visualization made easy with Charts💡🚀

know-your-gitstats A web application to ?? inspect your GitHub Profile Stats ?? in a lucid way. Visualization made easy with Charts ?? ?? . ✅ Features

Shubham Jadhav 46 Oct 15, 2022
Typr is a full-stack web application designed for new developers to improve their typing skills. User Authentication, Multiplayer, and Statistics included.

Typr Typr is a full-stack web application designed for new developers to improve their typing skills. It includes Javascript, Ruby and Python typing p

Connor Mullin 5 May 12, 2022
Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap

Vasco Asturiano 1.3k Jan 3, 2023
D3 (or D3.js) is a JavaScript library for visualizing data using web standards

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.

D3 103.8k Jan 5, 2023
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022