higlass-labelled-points-track
Version:
HiGlass Labelled Points Track
257 lines (245 loc) • 8.23 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.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>
</html>