Unable to create multiple instances on the same page #384
Description
Hi there. I am trying to render two different hic reports on the same page. This is the code that I have tried. I also noticed issue 124 mentioned this as solved but It doesn't seem to be working.
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Juicebox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/juicebox.css"
/>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/juicebox.min.js"
></script>
</head>
<body>
<div>First container</div>
<div id="app-container"></div>
<div>Second container</div>
<div id="app-container2"></div>
<script type="module">
// FIRST MAP
const config = {
url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
name: "TEST1",
};
const container = document.getElementById("app-container");
juicebox.init(container, config).then(function (hicBrowser) {
console.log("Juicebox loaded");
});
// SECOND MAP
const config2 = {
url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
name: "TEST2",
};
const container2 = document.getElementById("app-container2");
juicebox.init(container2, config2).then(function (hicBrowser) {
console.log("Juicebox loaded");
});
</script>
</body>
</html>
The second declaration of juicebox.init for container2 seems to be overriding the first instance. I have also tried passing the config as a list of two different configurations, however, this still does not work.
Is there a way to render two different .hic files at the same time? Thanks @jrobinso
Metadata
Metadata
Assignees
Labels
No labels