higlass-labelled-points-track
Version:
HiGlass Labelled Points Track
129 lines (128 loc) • 5.47 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"> <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> <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> <meta name=twitter:image:src content=https://raw.githubusercontent.com/flekschas/higlass-geojson/master/teaser.jpg> <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>body,html{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> <script type="text/javascript" src="higlass-labelled-points-track.min.js"></script></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>