Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆

Subscribe to our mailing list


A preview of full webpage or its DOM element with flexible positioning and navigation support

Subscribe to updates I use minimap

Statistics on minimap

Number of watchers on Github 227
Number of open issues 6
Average time to close an issue 2 days
Main language JavaScript
Average time to merge a PR about 1 hour
Open pull requests 0+
Closed pull requests 1+
Last commit about 3 years ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 49 KB
Homepage http://www.toolit...
Organization / Authorprincejwesley
Page Updated
Do you use minimap? Leave a review!
View open issues (6)
View minimap activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating minimap for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

minimap - A jQuery Plugin

A preview of full webpage or its DOM element with flexible positioning and navigation support

Demo Page


Getting Started

Download the latest code

Fork this repository or download js/css files from dist directory.

Including it on your page

Include jQuery and this plugin on a page.

<link rel="stylesheet" href="minimap.min.css" />
<script src="jquery.js"></script>
<script src="minimap.min.js"></script>

Basic Usage

//Desired dom element
var previewBody = $('body').minimap();



height ratio of the view port. ratio can be in the range [0.0, 1.0). (default: **0.6**)


width ratio of the view port. ratio can be in the range [0.0, 0.5). (default: **0.05**)


Margin top ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: **0.035**)


Margin left or right(based on position property) ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: **0.035**)


position of the minimap. Supported positions are:

  1. 'right' (default)
  2. 'left'


touch support. (default: true)


linear animation support for scrolling. (dafault: true)


Smooth scroll delay in milliseconds. (default: 200ms)


disableFind if true, prevents browser CTRL+F from finding duplicated text in minimap. (default: false)


function setPosition(position)

Set position property. position can be either 'left' or 'right'

function setHeightRatio(ratio)

Set heightRatio property.

function setWidthRatio(ratio)

Set widthRatio property.

function setOffsetHeightRatio(ratio)

Set offsetHeightRatio property.

function setOffsetWidthRatio(ratio)

Set offsetWidthRatio property.

function setSmoothScroll(smooth)

Set smoothScroll property

function setSmoothScrollDelay(duration)

Set setSmoothScrollDelay property.


function onPreviewChange(minimap, scale)

onPreviewChange callback will be triggered for the below cases:

  1. View port is resized.
  2. Calling setter functions.

Use this function to customize DOMs inside minimap.


minimap - $minimap DOM
scale - Scale object with `x` and `y` properties.(width/height ratio of minimap with respect to viewport)

Other functions

function show()

Show preview

function hide()

Hide preview

function toggle()

Toggle Preview

Default Settings

Mini-map with default values

var previewBody = $('body').minimap(
    heightRatio : 0.6,
    widthRatio : 0.05,
    offsetHeightRatio : 0.035,
    offsetWidthRatio : 0.035,
    position : "right",
    touch: true,
    smoothScroll: true,
    smoothScrollDelay: 200,
    onPreviewChange: function(minimap, scale) {},
    disableFind : false

CSS classes

Use the below css classes for customization

.minimap - Mini-map area

.miniregion - Mini-map view area


  1. Async updates to the dom elements after minimap was created may not reflect in the preview.


This plugin is licensed under the MIT license.

Copyright (c) 2014 Prince John Wesley

minimap open issues Ask a question     (View All Issues)
  • almost 3 years Idea: Chrome extension
  • almost 4 years Minimap does not scroll all the way to the top
  • almost 4 years Real time update
  • over 4 years Compatibility with Ace Editor
  • over 4 years Bug on short sites
minimap questions on Stackoverflow (View All Questions)
  • VS Code Scroll Map (Minimap)
  • XNA minimap for randomly generated level
  • How to change the color of right sidebar (miniMap) in sublime?
  • Rockscroll or Metalscroll for Visual Studio 2010 (Minimap)
  • How could I hide the minimap bar on sublimetext 3
  • How do I "parse" image locations on a minimap with OpenCV (or other tool)?
  • sublime text 3 minimap click and drag
  • Unity 3D - UI renders after minimap (a camera's viewport)
  • How to show the bottom left minimap widget in streetview (Google Map JS API)
  • Drawing a minimap in SFML/C++
  • Node+Jade+Express+Sqlite: How can I add a MiniMap to a Leaflet Map?
  • How make image of generated meshes in Unity for Minimap
  • Player position on minimap
  • which minimap should I use with custom image in leaflet
  • How to enable minimap in Mono Develop?
  • Is there an Atom plugin to add comment headers that are visible in a minimap?
  • MiniMap for d3.js collapsible tree
  • How can create Zoom preview of image or how can we create minimap of image
  • Disable Sublime Text Minimap for a specific syntax
  • How to turn on minimap in Emacs on startup?
  • How to make minimap run in specified modes?
  • How to stop emacs minimap from horizontal recentering?
  • minimap Drawing issue with graphics in thread
  • libgdx tiled map get player position in whole map to make a minimap
  • What is the Overview Ruler Minimap of Pydev in Eclipse highlighting?
  • Can you suggest library for minimap component for process diagram?
  • Canvas Panning All Elements Including Minimap
  • How to implement Minimap of KineticJS Layer?
  • Atom Editor - Install Minimap Package on Windows
  • Minimap for D3JS
minimap list of languages used
Other projects in JavaScript