higlass-labelled-points-track
Version:
HiGlass Labelled Points Track
194 lines (191 loc) • 7.9 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.34292601335041,
-122.13685493088353
],
"initialYDomain": [
-40.98228559500925,
-40.76758828118323
],
"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": "labelled-points-track",
"uid": "EERI21SXQzO0-s7f5sAe9A",
"data": {
"type": "local-tiles",
"tilesetInfo": {
"x": {
"zoom_step": 1,
"tile_size": 256,
"max_zoom": 0,
"min_pos": [
-180,
-180
],
"max_pos": [
180,
180
],
"max_data_length": 134217728,
"max_width": 360
}
},
"tiles": {
"x.0.0.0": [
{
"x": -122.29340351667594,
"y": -40.90076029033937,
"size": 10,
"data": "Fraxinus o. `Raywood'",
"uid": "Eq71PfMlR0aqHd2zSlDclA"
},
{
"x": -122.18808936055962,
"y": -40.805069480744535,
"size": 20,
"data": "Acer rubrum",
"uid": "DYKKOHNuRBmEPdTip0pyDw"
},
{
"x": -122.23773953309676,
"y": -40.885281196424444,
"size": 1,
"data": "Other",
"uid": "b04PPSR6Ti28MJPpzXpAuA"
},
{
"x": -122.24511511745628,
"y": -40.88863482388454,
"data": "Prunus sp",
"uid": "FDx3bT4lS3uHU_O3QWWSeA"
},
{
"x": -122.23343925578251,
"y": -40.8557013042502,
"data": "Robinia sp",
"uid": "awo8Nh_JSVuQ9qL7i8LwNw"
},
{
"x": -122.24342444542407,
"y": -40.870321322567484,
"data": "Liquidambar styraciflua",
"uid": "Y4YWXsOpTJuo_1gwX7iEVQ"
},
{
"x": -122.2642961601619,
"y": -40.94080429377518,
"data": "Platanus acerifolia",
"uid": "IryaZtchQvK8u9SIb0FXQw"
},
{
"x": -122.26123092270329,
"y": -40.94244384313975,
"data": "Pistacia chinensis",
"uid": "L3YvLuqwRuKcR3-UYVmWvw"
}
]
}
},
"options": {
"name": "trees.geojson.gjdb",
"colorField": "data",
"pointShape": "circle",
"sizeField": "size",
"colorScale": {
"type": "categorical"
}
},
"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": {}
}
}
const viewer = window.hglib.viewer(
document.getElementById('demo'),
testViewConfig,
{ bounded: true },
);
viewer.then(api => {
api.on('click', (evt) => console.log("clicked", evt))
}) </script>