higlass-labelled-points-track
Version:
HiGlass Labelled Points Track
191 lines (182 loc) • 5.79 kB
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="Peter Kerpedjiev">
<meta name="description" content="A plugin track to display labelled points in HiGlass">
<meta name="keywords" content="HiGlass, Plugin Tracks">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="HiGlass Labelled Points Track">
<meta itemprop="description" content="A plugin track to display labelled points in HiGlass">
<meta itemprop="image" content="https://raw.githubusercontent.com/flekschas/higlass-geojson/master/teaser.jpg">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@flekschas">
<meta name="twitter:title" content="HiGlass Labelled Points Track">
<meta name="twitter:description" content="A plugin track to display labelled points in HiGlass">
<meta name="twitter:creator" content="@flekschas">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="https://raw.githubusercontent.com/flekschas/higlass-geojson/master/teaser.jpg">
<!-- Open Graph -->
<meta property="og:title" content="HiGlass Labelled Points Track" />
<meta property="og:description" content="A plugin track to display labelled points HiGlass" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/pkerpedjiev/higlass-labelled-points-track" />
<meta property="og:image" content="https://raw.githubusercontent.com/flekschas/higlass-geojson/master/teaser.jpg" />
<title>HiGlass Labelled Points Track</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="hglib.css">
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
#demo {
position: absolute;
left: 1rem;
top: 1rem;
bottom: 1rem;
right: 1rem;
}
</style>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
<script src="hglib.js"></script>
<script>
const testViewConfig =
{
"editable": true,
"trackSourceServers": [
"/api/v1",
"http://higlass.io/api/v1"
],
"exportViewUrl": "/api/v1/viewconfs",
"views": [
{
"initialXDomain": [
-122.20156701514686,
-122.18557812096043
],
"initialYDomain": [
-40.87951017946116,
-40.86589657554189
],
"tracks": {
"top": [
{
"type": "top-axis",
"local": true,
"orientation": "1d-horizontal",
"thumbnail": {},
"defaultOptions": {},
"server": "",
"tilesetUid": "f9XyN0MqRGenjZwyxzuPqw",
"uid": "EmigNWHmTTqHrus850E4QQ",
"options": {},
"width": 163,
"height": 20
}
],
"left": [
{
"type": "left-axis",
"local": true,
"orientation": "1d-vertical",
"thumbnail": {},
"availableOptions": [
"minWidth"
],
"defaultOptions": {
"minWidth": 100
},
"server": "",
"tilesetUid": "FC_-HyLfTzenwsNs25fsyQ",
"uid": "AgP_uuXaQNmULVv89sMgOw",
"options": {
"minWidth": 100
},
"width": 29,
"height": 420
}
],
"center": [
{
"uid": "bSUNQetBTMOULgjVWRxeBQ",
"type": "combined",
"contents": [
{
"type": "osm-tiles",
"uid": "ez_rOgMcTOGqLmRDt_6TRg",
"tilesetUid": "JC76ehyHQWCWvR_z2J9zkA",
"server": "https://resgen.io/api/v1",
"options": {
"minPos": -180,
"maxPos": 180,
"maxZoom": 19,
"labelPosition": "bottomRight",
"labelLeftMargin": 0,
"labelRightMargin": 0,
"labelTopMargin": 0,
"labelBottomMargin": 0
},
"width": 163,
"height": 420
},
{
"type": "labelled-points-track",
"uid": "EERI21SXQzO0-s7f5sAe9A",
"tilesetUid": "ITgQxNasQOqCoHDNmvR45A",
"server": "https://resgen.io/api/v1",
"options": {
"name": "trees.geojson.gjdb"
},
"width": 20,
"height": 20
}
],
"width": 163,
"height": 420,
"options": {}
}
],
"bottom": [],
"right": [],
"whole": [],
"gallery": []
},
"layout": {
"w": 12,
"h": 6,
"x": 0,
"y": 0
},
"uid": "d7AQiNvQTuCDl4HKbv3s4g"
}
],
"zoomLocks": {
"locksByViewUid": {},
"locksDict": {}
},
"locationLocks": {
"locksByViewUid": {},
"locksDict": {}
},
"valueScaleLocks": {
"locksByViewUid": {},
"locksDict": {}
}
};
window.hglib.viewer(
document.getElementById('demo'),
testViewConfig,
{ bounded: true },
);
</script>
</html>