dev/multiple-browsers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <link href=../img/favicon.ico rel="shortcut icon">
    <title>IGV - Dev</title>

    <!-- IGV CSS -->

    <link href="css/dev.css" rel="stylesheet" type="text/css"/>


</head>

<body>

<h1>Example of multiple IGV browser windows on a page</h1>

<div class="side-by-side-container">
    <div id="ba" style="width: 50%">
    </div>
    <div id="bb" style="width: 50%">
    </div>
</div>

<div class="side-by-side-container">
    <div id="bc" style="width: 50%">
    </div>
    <div id="bd" style="width: 50%">
    </div>
</div>


<script type="module">

    import igv from "../js/api.js";

    const config_a =
        {
            genome: "hg19",
            locus: 'egfr',
            tracks: [
                {
                    "url": "https://data.broadinstitute.org/igvdata/test/igv-web/segmented_data_080520.seg.gz",
                    "indexed": false,
                    "isLog": true,
                    "name": "GBM Copy # (TCGA Broad GDAC)"
                }
            ]
        };

    const config_b =
        {
            genome: "hg19",
            locus: 'myc',
            tracks: [
                {
                    "url": "https://www.encodeproject.org/files/ENCFF356YES/@@download/ENCFF356YES.bigWig",
                    "name": "ctcf bigwig"
                }
            ]
        };

    igv.createBrowser(document.getElementById("ba"), config_a)
        .then(function (b) {
            console.log("Created browser guid: " + b.guid);
        });

    igv.createBrowser(document.getElementById("bb"), config_b)
        .then(function (b) {
            console.log("Created browser guid: " + b.guid);
        });

    igv.createBrowser(document.getElementById("bc"), config_b)
        .then(function (b) {
            console.log("Created browser guid: " + b.guid);
        });

    igv.createBrowser(document.getElementById("bd"), config_a)
        .then(function (b) {
            console.log("Created browser guid: " + b.guid);
        });


</script>

</body>

</html>