@gmod/jbrowse

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Embedding JBrowse · JBrowse</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Embedding in an iframe"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Embedding JBrowse · JBrowse"/><meta property="og:type" content="website"/><meta property="og:url" content="https://jbrowse.org/index.html"/><meta property="og:description" content="## Embedding in an iframe"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"/><link rel="alternate" type="application/atom+xml" href="https://jbrowse.org/blog/atom.xml" title="JBrowse Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://jbrowse.org/blog/feed.xml" title="JBrowse Blog RSS Feed"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><h2 class="headerTitle">JBrowse</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/blog" target="_self">Blog</a></li><li class="siteNavGroupActive"><a href="/docs/installation.html" target="_self">Documentation</a></li><li class=""><a href="/en/demos.html" target="_self">Demos</a></li><li class=""><a href="/en/developers.html" target="_self">Developers</a></li><li class=""><a href="/en/contact.html" target="_self">Contact</a></li><li class=""><a href="/en/references.html" target="_self">References</a></li><li class=""><a href="/en/help.html" target="_self">Help</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Advanced configuration</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Tutorial</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial.html">Indexed file formats tutorial</a></li><li class="navListItem"><a class="navItem" href="/docs/tutorial_classic.html">Classic quick-start guide</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Configuring tracks</h3><ul><li class="navListItem"><a class="navItem" href="/docs/reference_sequence.html">Reference sequence configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/canvas_features.html">CanvasFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/html_features.html">HTMLFeatures</a></li><li class="navListItem"><a class="navItem" href="/docs/alignments.html">Alignments tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/bigwig.html">Wiggle/BigWig Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/variants.html">VCF tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/minimal.html">Minimal JBrowse configurations</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Advanced configuration</h3><ul><li class="navListItem navListItemActive"><a class="navItem" href="/docs/embedding.html">Embedding JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/mouse_configs.html">Mouse clicks, menus, and popups</a></li><li class="navListItem"><a class="navItem" href="/docs/configuration_file_formats.html">Configuration File Formats</a></li><li class="navListItem"><a class="navItem" href="/docs/dataset_selector.html">Dataset Selector</a></li><li class="navListItem"><a class="navItem" href="/docs/track_selectors.html">Track Selectors</a></li><li class="navListItem"><a class="navItem" href="/docs/track_metadata.html">Track Metadata</a></li><li class="navListItem"><a class="navItem" href="/docs/global_options.html">Global configuration options</a></li><li class="navListItem"><a class="navItem" href="/docs/compression.html">Compressing JBrowse data</a></li><li class="navListItem"><a class="navItem" href="/docs/authentication.html">HTTP authentication for JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/paired_reads.html">Paired read viewing</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Command line</h3><ul><li class="navListItem"><a class="navItem" href="/docs/flatfile-to-json.pl.html">flatfile-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/remove-track.pl.html">remove-track.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/ucsc-to-json.pl.html">ucsc-to-json.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/generate-names.pl.html">generate-names.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/prepare-refseqs.pl.html">prepare-refseqs.pl</a></li><li class="navListItem"><a class="navItem" href="/docs/biodb-to-json.pl.html">biodb-to-json.pl</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">JBrowse Desktop</h3><ul><li class="navListItem"><a class="navItem" href="/docs/jbrowse_desktop.html">JBrowse Desktop</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">FAQ</h3><ul><li class="navListItem"><a class="navItem" href="/docs/faq.html">JBrowse FAQ</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Other topics</h3><ul><li class="navListItem"><a class="navItem" href="/docs/url_strings.html">JBrowse URL parameters</a></li><li class="navListItem"><a class="navItem" href="/docs/image_tracks.html">Pre-rendered Image Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/feature_coverage.html">Feature Coverage Tracks</a></li><li class="navListItem"><a class="navItem" href="/docs/screenshots.html">Automating screenshots of JBrowse</a></li><li class="navListItem"><a class="navItem" href="/docs/events.html">JBrowse Subscribe/Publish events</a></li><li class="navListItem"><a class="navItem" href="/docs/perl_config.html">Sample configuration bash script</a></li><li class="navListItem"><a class="navItem" href="/docs/data_formats.html">JBrowse REST API and Data APIs</a></li><li class="navListItem"><a class="navItem" href="/docs/plugins.html">Installing and writing plugins</a></li><li class="navListItem"><a class="navItem" href="/docs/cors.html">Cross-origin resource sharing (CORS)</a></li><li class="navListItem"><a class="navItem" href="/docs/sparql.html">SPARQL configuration</a></li><li class="navListItem"><a class="navItem" href="/docs/data_export.html">Data export</a></li><li class="navListItem"><a class="navItem" href="/docs/usage_stats.html">Usage Statistics</a></li></ul></div></div></section></div><script> document.addEventListener('DOMContentLoaded', function() { createToggler('#navToggler', '#docsNav', 'docsSliderActive'); createToggler('#tocToggler', 'body', 'tocActive'); const headings = document.querySelector('.toc-headings'); headings && headings.addEventListener('click', function(event) { if (event.target.tagName === 'A') { document.body.classList.remove('tocActive'); } }, false); function createToggler(togglerSelector, targetSelector, className) { var toggler = document.querySelector(togglerSelector); var target = document.querySelector(targetSelector); toggler.onclick = function(event) { event.preventDefault(); target.classList.toggle(className); }; } }); </script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Embedding JBrowse</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="embedding-in-an-iframe"></a><a href="#embedding-in-an-iframe" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embedding in an iframe</h2> <p>One way of embedding JBrowse just runs the full browser in an <code>iframe</code> element. It's very simple and easy to get running.</p> <pre><code class="hljs css languages- html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Embedded JBrowse<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Volvox JBrowse Embedded in an <span class="hljs-tag"><<span class="hljs-name">code</span>></span>iframe<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 600px; margin: 0 auto;"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../index.html?data=sample_data/json/volvox&tracklist=0&nav=0&overview=0&tracks=DNA%2CExampleFeatures%2CNameTest%2CMotifs%2CAlignments%2CGenes%2CReadingFrame%2CCDS%2CTranscript%2CClones%2CEST"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"border: 1px solid black"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"600"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"300"</span> ></span> <span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p>Which ends up looking like this:</p> <p><div style="padding: 0 1em; margin: 1em 0; border: 1px solid black"> <h1>Volvox JBrowse Embedded in an <code>iframe</code></h1> <div style="width: 600px; margin: 0 auto;"> <iframe src="https://jbrowse.org/code/JBrowse-1.16.6/?data=sample_data/json/volvox&tracklist=0&nav=0&overview=0&tracks=DNA%2CExampleFeatures%2CNameTest%2CMotifs%2CAlignments%2CGenes%2CReadingFrame%2CCDS%2CTranscript%2CClones%2CEST" style="border: 1px solid black" width="600" height="300" > </iframe> </div> </div></p> <p>Note that the iframe's <code>src</code> attribute just points to the same JBrowse URL as your browser would. However, it sets a few additional options in the URL to hide some of the UI elements to give the view a more "embedded" feel: <code>tracklist=0</code> hides the track list on the left side, <code>nav=0</code> hides the navigation bar (the zoom buttons, search box, etc), and <code>overview=0</code> hides the overview scale bar.</p> <h2><a class="anchor" aria-hidden="true" id="embedding-directly-in-a-div"></a><a href="#embedding-directly-in-a-div" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embedding directly in a <code>div</code></h2> <p>JBrowse 1.14.0 and higher supports a more flexible way of embedding JBrowse by running it directly in a <code>div</code> inside another document.</p> <p>Example code for this:</p> <pre><code class="hljs css languages- html"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Embedded JBrowse<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">background</span>: blue; <span class="hljs-attribute">color</span>: white } <span class="hljs-selector-class">.jbrowse</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">5em</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span> } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 0 1em; margin: 1em 0; border: 1px solid black"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Volvox JBrowse Embedded in a <span class="hljs-tag"><<span class="hljs-name">code</span>></span>div<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"jbrowse"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"GenomeBrowser"</span> <span class="hljs-attr">data-config</span>=<span class="hljs-string">' "baseUrl": "../", "dataRoot": "sample_data/json/volvox", "show_nav": false, "show_tracklist": false, "show_overview": false, "update_browser_title": false, "updateBrowserURL": false '</span> ></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LoadingScreen"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 50px;"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Loading...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../dist/main.bundle.js"</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </code></pre> <p>which looks like this when run</p> <p><div style="padding: 0 1em; margin: 1em 0; border: 1px solid black; background: blue; color: white"> <h1>Volvox JBrowse Embedded in a <code>div</code></h1> <div class="jbrowse" id="GenomeBrowser" data-config=' "baseUrl": "../code/JBrowse-1.16.6/", "dataRoot": "sample_data/json/volvox", "show_nav": false, "show_tracklist": false, "show_overview": false, "update_browser_title": false, "updateBrowserURL": false ' style="height: 300px;width: 600px;padding: 0;margin-left: 5em;border: 1px solid #ccc" > <div id="LoadingScreen" style="padding: 50px;"> <h1>Loading...</h1> <p>If this does not load, try viewing this page with <a href="http://jbrowse.org/docs/embedding.html">HTTP instead of HTTPS</a></p> </div> </div> </div> <script type="text/javascript" src="../code/JBrowse-1.16.6/dist/main.bundle.js" charset="utf-8"></script></p> <p>The biggest gotcha with this embedding method is that the relative path from the page where you embed JBrowse to the JBrowse <code>*.bundle.js</code> files must be <code>dist/</code> if you want to use a "stock" build of JBrowse. A simple way to accomplish that might be to configure a symlink in your site directory, for example by running <code>ln -s ./path/to/jbrowse/dist/ .</code>, or by creating some kind of path alias in your web server configuration.</p> <p>For JBrowse 1.15.5 or higher, the other option is to clone JBrowse from GitHub and run <code>setup.sh</code> with a nonstandard <code>JBROWSE_PUBLIC_PATH</code> environment variable set, which will configure JBrowse to serve its bundles from a different path. For example, if you had this site layout:</p> <pre><code class="hljs css languages- text">site_root <span class="hljs-string">|- docs</span> <span class="hljs-string">|- index.html (runs embedded jbrowse)</span> <span class="hljs-string">|- jbrowse (jbrowse installation)</span> </code></pre> <p>you might run the following shell commands:</p> <pre><code class="hljs css languages- sh"><span class="hljs-built_in">cd</span> site_root git <span class="hljs-built_in">clone</span> --depth 50 https://github.com/GMOD/jbrowse.git <span class="hljs-built_in">cd</span> jbrowse JBROWSE_PUBLIC_PATH=/jbrowse/dist/ ./setup.sh </code></pre> <p>Note the trailing slash on the value of JBROWSE_PUBLIC_PATH.</p> <h2><a class="anchor" aria-hidden="true" id="embedding-in-a-div-with-dynamic-configs"></a><a href="#embedding-in-a-div-with-dynamic-configs" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Embedding in a <code>div</code> with dynamic configs</h2> <p>JBrowse also allows you to define your own config dynamically and create an embedded JBrowse with that config. To do this, you first run <code>browser.bundle.js</code> which makes available <code>window.Browser</code>. You can then us that with a config object to create a JBrowse instace. This can be useful for, for example, creating a JBrowse track from data you already have in memory via the FromConfig store class.</p> <p>This could look like this:</p> <pre><code class="hljs css languages- html"><span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Embedded JBrowse<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">background</span>: blue; <span class="hljs-attribute">color</span>: white } <span class="hljs-selector-class">.jbrowse</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">5em</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span> } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 0 1em; margin: 1em 0; border: 1px solid black"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Custom JBrowse Embedded in a <span class="hljs-tag"><<span class="hljs-name">code</span>></span>div<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"jbrowse"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"GenomeBrowser"</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"LoadingScreen"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"padding: 50px;"</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Loading...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../dist/browser.bundle.js"</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> features = [] <span class="hljs-comment">// Add some features</span> <span class="hljs-keyword">var</span> config = { <span class="hljs-attr">containerID</span>: <span class="hljs-string">'GenomeBrowser'</span>, <span class="hljs-attr">baseUrl</span>: <span class="hljs-string">'../'</span>, <span class="hljs-attr">refSeqs</span>: { <span class="hljs-attr">url</span>: <span class="hljs-string">'https://s3.amazonaws.com/1000genomes/technical/reference/GRCh38_reference_genome/GRCh38_full_analysis_set_plus_decoy_hla.fa.fai'</span>, }, <span class="hljs-attr">tracks</span>: [ { <span class="hljs-attr">key</span>: <span class="hljs-string">'GRCH38 Reference Sequence'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'GRCH38 Reference Sequence'</span>, <span class="hljs-attr">urlTemplate</span>: <span class="hljs-string">'https://s3.amazonaws.com/1000genomes/technical/reference/GRCh38_reference_genome/GRCh38_full_analysis_set_plus_decoy_hla.fa'</span> }, { <span class="hljs-attr">key</span>: <span class="hljs-string">'MyTrack'</span>, <span class="hljs-attr">label</span>: <span class="hljs-string">'MyTrack'</span>, <span class="hljs-attr">storeClass</span>: <span class="hljs-string">'JBrowse/Store/SeqFeature/FromConfig'</span>, <span class="hljs-attr">features</span>: features, <span class="hljs-attr">type</span>: <span class="hljs-string">'CanvasVariants'</span> } ] }; <span class="hljs-comment">// Add to the config or tracks</span> <span class="hljs-comment">// Instantiate JBrowse</span> <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'load'</span>, () => { <span class="hljs-built_in">window</span>.JBrowse = <span class="hljs-keyword">new</span> <span class="hljs-built_in">window</span>.Browser( config ); }) </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> </code></pre> </span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/minimal.html">← Minimal JBrowse configurations</a><a class="docs-next button" href="/docs/mouse_configs.html">Mouse clicks, menus, and popups →</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#embedding-in-an-iframe">Embedding in an iframe</a></li><li><a href="#embedding-directly-in-a-div">Embedding directly in a <code>div</code></a></li><li><a href="#embedding-in-a-div-with-dynamic-configs">Embedding in a <code>div</code> with dynamic configs</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/blog">Blog</a><a href="/docs/tutorial.html">Getting Started</a></div><div><h5>Community</h5><a href="https://gitter.im/GMOD/jbrowse">Project Chat</a><a href="https://twitter.com/JBrowseGossip" target="_blank" rel="noreferrer noopener">Twitter</a></div><div><h5>More</h5><a href="https://github.com/GMOD/jbrowse">GitHub</a><a class="github-button" href="https://github.com/GMOD/jbrowse" data-icon="octicon-star" data-count-href="/GMOD/jbrowse/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><section class="copyright">Copyright © 2019 Evolutionary Software Foundation</section></footer></div></body></html>