Navigation Menu

Skip to content


Repository files navigation

HiGlass Image

A collection of tracks for viewing image data in HiGlass

HiGlass Demo Build Status code style prettier

HiGlass showing

HiGlass in dark mode showing a beautiful gigapixel image of Rio de Janeiro by The Rio de Janeiro - Hong Kong Connection

Live Demo:

Note: This is the source code for image tracks only! You might want to check out the following repositories as well:


npm install higlass-image


Note: We assume that you have create and ingested a SQLite-based image tileset database. If you're asking yourself "what the fu*! are they talking about" please check out our image tiles to SQLite converter.

  1. Make sure you load this track prior to hglib.js. For example:
<script src="higlass-image.js"></script>
<script src="hglib.js"></script>
  1. Configure the track in the view config.
  center: [
      uid: 'c1',
      type: 'combined',
      options: {},
      contents: [
          uid: 'my-fancy-tiled-image',
          type: 'image-tiles',
          server: 'http://localhost:8001/api/v1/',
          tilesetUid: 'my-fancy-tiled-image',
          options: {
            name: 'My fancy tiled image'

Take a look at src/index.html for an example.

  1. You did it! We're so proud of you 🎉. You are truly the best!



$ git clone && higlass-image
$ npm install


Developmental server: npm start Production build: npm run build