A preview of the full source code.

In the screenshot above the minimap-git-diff and minimap-highlight-selected plugins are activated.

apm install minimap

• Service-based Plugin API: Use the plugin generation command and start developing your plugin right away.
• Decoration API: Use the same API to manage TextEditor and Minimap decorations.
• Canvas-based Rendering: Simple, fast and flexible.
• Stand-alone Mode: Wants to display a preview of a text editor in your UIs, use a stand-alone version of the Minimap.

Below is the list of available plugins so far:

If checked the Minimap is displayed on Atom startup. (default=true)

If checked the devicePixelRatio will be rounded using Math.floor. (default=true)

If checked the code will be highlighted using the grammar tokens. (default=true)

true	false

If checked the Minimap appears on the left side of editors, otherwise it appears on the right side. (default=false)

true	false

The height of a character in the Minimap in pixels. (default=2)

1px	2px	4px

The width of a character in the Minimap in pixels. (default=1)

1px	2px

The space between lines in the Minimap in pixels. (default=1)

1px	2px

The opacity used to render the line text in the Minimap. (default=0.6)

0.6	1

When enabled, text editor tokens are rendered as plain blocks, with no regards to the whitespaces they contains. (default=false)

false	true

If checked, the Minimap plugins can be activated/deactivated from the Minimap settings view and a quick settings dropdown will be available on the top right corner of the Minimap. (default=true)

You need to restart Atom for this setting to be effective.

Toggles the display of a side line showing which part of the buffer is currently displayed by the Minimap. The side line appear only if the Minimap height is bigger than the editor view height. (default=true)

When plugins are installed, a setting is created for each to enable/disable them directly from the Minimap settings view.

When several plugins create decorations for the same layer, the general rule is to render the decorations as follows:

• On the background layer, the line decorations are rendered before the highlight-under decorations.
• On the foreground layer, the highlight-over decorations are rendered before the highlight-outine decorations.
• When two plugins adds the same type of decorations at the same place, the decorations are rendered in the order they have been created.

But fortunately, it's possible to reorder decorations on their specific layer using these settings. These settings works as a z-index in CSS, the higher the value, the higher the decorations will be in the render stack, for instance, a plugin's decorations with an order value of 1 will appear above decorations from a plugin with an order value of 0.

Whether to offset the minimap canvas when scrolling to keep the scroll smooth. When true the minimap canvas will be offseted, resulting in a smoother scroll, but with the side-effect of a blurry minimap when the canvas is placed between pixels. When false the canvas will always stay at the same position, and will never look blurry, but the scroll will appear more jagged. (default=true)

true	false

Enable animations when scrolling the editor by clicking on the Minimap. (default=false)

Duration of the scroll animation when clicking on the Minimap. (default=300)

When enabled, using the mouse wheel over the Minimap will make it scroll independently of the text editor. The Minimap will still sync with the editor whenever the editor is scrolled, but it will no longer relay the mouse wheel events to the editor. (default=false)

The scrolling speed when the Independent Minimap Scroll On Mouse Wheel Events setting is enabled. (default=0.5)

If checked the Minimap scroll is done using a translate3d transform, otherwise the translate transform is used. (default=true)

If this option is enabled and Soft Wrap is checked then the Minimap max width is set to the Preferred Line Length value. (default=true)

If this option and adjustMinimapWidthToSoftWrap are enabled the minimap width will never go past the limit sets by CSS. On the other hand, when disabled the minimap will expand to honor the preferred line width. (default=true)

When enabled the Minimap uses an absolute positioning, letting the editor's content flow below the Minimap. (default=false)

Note that this setting will do nothing if Display Minimap On Left is also enabled.

false	true

When enabled and Absolute Mode is also enabled, the minimap height will be adjusted to only take the space required by the text editor content, leaving the space below triggering mouse events on the text editor. (default=false)

Be aware this can have some impact on performances as the minimap canvases will be resized every time a change in the editor make its height change.

The Minimap package doesn't provide any default keybindings. But you can define your own as demonstrated below:

'atom-workspace':
  'cmd-m': 'minimap:toggle'
  'ctrl-alt-cmd-j': 'minimap:generate-javascript-plugin'
  'ctrl-alt-cmd-b': 'minimap:generate-babel-plugin'
  'ctrl-alt-cmd-c': 'minimap:generate-coffee-plugin'

If you want to hide the default editor scrollbar, edit your style.less (Open Your Stylesheet) and use the following snippet:

atom-text-editor[with-minimap] .vertical-scrollbar {
  display: none;
}

atom-text-editor atom-text-editor-minimap {
  background: green;
}

atom-text-editor atom-text-editor-minimap .minimap-visible-area::after {
  background-color: rgba(0, 255, 0, 0.5);
}

atom-text-editor atom-text-editor-minimap .minimap-scroll-indicator {
  background-color: green;
}

With both absoluteMode and adjustAbsoluteModeHeight settings are enabled, the canvases in the minimap won't necessarily takes the whole editor's height.

atom-text-editor,
html  {
  atom-text-editor-minimap canvas:first-child {
    background: @syntax-background-color;
  }
}

If you want to prevent to catch the mouse pointer when the absoluteMode setting is enabled you can use the following snippet to do so:

atom-text-editor atom-text-editor-minimap {
  pointer-events: none;
}

atom-text-editor atom-text-editor-minimap .minimap-visible-area {
  pointer-events: auto;
}

The visible area will still allow interaction but the Minimap track won't.

You can put the following code in your user stylesheet to achieve this effect:

atom-text-editor {
  atom-text-editor-minimap {
    display: none;
  }

  &.is-focused {
    atom-text-editor-minimap {
      display: block;
    }
  }
}

Put the following code in your user stylesheet to make your minimap look like Sublime text. It's more easy to view when you have code hightlight in minimap.

Default State (Hidden)	Hover	Only display Visible area when hover or click/drag event.

atom-text-editor,
html {
  atom-text-editor-minimap {
    .minimap-visible-area {
      background-color: #7c7c7c;
      // Color of Visible area.
      opacity: 0;
      // Default 0 when you not working with minimap
      cursor: default;
      // Change cursor style to pointer.
      transition: 0.5s opacity;
      // Better UI.
      &:hover {
        opacity: 0.2;
      } // Only display Minimap visible area when working.
      &:active {
        cursor: default;
      } // Change cursor when dragging.
    }
    &:hover {
      .minimap-visible-area {
        opacity: 0.2;
        transition: opacity 1s;
      } // When Hover to all minimap area, visible area will display.
    }

    &:active {
      .minimap-visible-area {
        opacity: 0.2;
        transition: opacity 0.5s;
      } // Display Minimap visible area when dragging.
    }
  }
}

One neat trick is to use ASCII art to create huge comments visible in the minimap. This is really efficient when navigating huge files.

To generate these comments you can use on these useful Atom packages:

• Figlet
• Figletify
• Minimap Titles
• Draw Package

• Developers Documentation
• Minimap API Documentation

MIT