Component for creating vertical mini-map on html-page for document.body element.

Component inject in DOM of page and has position: fixed.

npm install dom-vertical-mini-map

<link rel="stylesheet" href="dom-vertical-mini-map.css">
<script src="dom-vertical-mini-map.js"></script>

MapElement - root HTMLElement of DomVerticalMiniMap.

ScrollMapElement - HTMLElement represented Window on MapElement.

MapPointElement - HTMLElement represented founded HTMLElement on MapElement.

Styles of MapElement.

Type: Object
Required: false

Value of CSS property background-color of MapElement.

Type: String
Default: rgba(248, 249, 250, 1)

Value of CSS property background-color of MapElement.

Type: String
Default: rgba(108, 117, 125, 1)

Position of MapElement on page.

Type: String
Values: left, right
Default: right

Value of CSS property background-color of MapElement.

Type: String
Default: 1rem

Value of CSS property background-color of MapElement.

Type: Number
Default: 1000

Options of ScrollMapElement.

Type: Object
Required: false

Enables ScrollMapElement.

Type: Boolean
Default: true

Styles of ScrollMapElement.

Type: Object Required: false

Value of CSS property background-color of ScrollMapElement. Use 'alpha' for opacity.

Type: String
Default: rgba(108, 117, 125, 0.3)

Array of objects. Every object configure one MapPointElement.

Type: Array Required: true

Configure drawing of MapPointElement.

Type: Object
Required: True

CSS selector for searching HTMLElements on page by document.querySelectorAll().

Type: String
Required: true

CSS selector for searching by querySelector() HTMLElement in element.
Filter elements founded by draw.selector if specified.

Type: String
Required: false

Styles of MapPointElement.

Type: Object
Required: false

Value of CSS property background-color of MapPointElement.

Type: String
Default: rgba(220, 53, 69, 1)

Value of CSS property background-color on hover of MapPointElement.

Type: String
Default: value of styles.borderColor of MapElement

Configure focus for MapPointElement.

Type: Object
Required: false

Enables focus element on MapPointElement click.

Type: Boolean
Default: false

CSS selector for searching by querySelector() HTMLElement (for focus) in element founded by draw.selector.

Type: String
Default: element founded by draw.selector

Configure scroll for MapPointElement.

Type: Object
Required: false

Enables scroll on MapPointElement click.

Type: Boolean
Default: true

CSS selector for searching by querySelector() HTMLElement (for scroll) in element founded by draw.selector.

Type: String
Default: element founded by draw.selector

Scrolls the Window to element (top/bottom/middle of Window) in the Document.

Type: String
Values: top, bottom, middle
Default: top

Array of objects. Every object concat text for title attribute of MapPointElement. Text separates by \n.
Priorities for concat of one object: text, textContent, attribute.

Type: Array
Required: false

Custom text.

Type: String
Required: false

CSS selector for searching by querySelector() HTMLElement for analyze.

Type: String
Required: false

Take value from attribute of element founded by selector.

Type: String
Required: false

Take string from textContent of element founded by selector.

Type: String
Required: false

Return MapElement.

Return version of DomVerticalMiniMap.

Create and inject DomVerticalMiniMap component in DOM.

Reset DomVerticalMiniMap component and remove it from DOM.

Reinitialize MapPointElements and refresh styles of #scrollElement and MapPointElements.

See examples.

Live examples:

• example1