forked from skruse/PLATIN
-
Notifications
You must be signed in to change notification settings - Fork 5
/
loader.html
131 lines (116 loc) · 4.69 KB
/
loader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html height="100%">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>PLATIN</title>
<style type="text/css">
.legend > table, .legend > div {
width: 200px !important;
height: 100px !important;
display: block;
overflow-y: scroll;
position: absolute;
right: 0px;
bottom: 0px;
font-size: 12px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/platin.css" rel="stylesheet" type="text/css">
<script src="platin-min.js"></script>
</head>
<body height="100%">
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this application to display correctly.
</div>
</noscript>
<table width=100%>
<tr>
<td colspan=2 width=100% align="center">
<div style="width:100%; position:relative">
<div style='width: 100%; float:left;'>
<a href="http://www.informatik.uni-leipzig.de:8080/geotemco/" target="_"><img width='18%' src='images/geotemco.png'></a>
<a href="http://www.topoi.org/group/d-6/" target="_"><img width='18%' src='images/topoi.png'></a>
<a href="http://skruse.github.io/PLATIN/" target="_"><img width='18%' src='images/platin.png'></a>
<a href="http://www.mpiwg-berlin.mpg.de /de/index.html" target=""><img width='18%' src='images/mpiwg.gif'></a>
<a href="https://de.dariah.eu/geobrowser" target="_"><img width='18%' src='images/dariah.png'></a>
</div>
</div>
</td>
</tr>
<tr >
<td width=50%>
<fieldset id="dataloaderContainerDiv" style="position:relative;">
<legend>Load Data</legend>
</fieldset>
</td>
<td rowspan=2 width=50% valign=top>
<fieldset id="storytellingContainerDiv" style="position:relative;">
<legend>Data History</legend>
</fieldset>
</td>
</tr>
<tr>
<td width=50%>
<fieldset id="overlayloaderContainerDiv" style="position:relative;">
<legend>Load Overlay</legend>
</fieldset>
</td>
</tr>
<tr>
<td width=50%>
<div id="mapContainerDiv" style="position:relative;"></div>
</td>
<td width=50%>
<div id="piechartContainerDiv" style="height:580px; position:relative;"></div>
</td>
</tr>
</table>
<div id="plotContainerDiv" style="position:relative;"></div>
<div id="tableContainerDiv" style="position:relative;"></div>
<script>
var datasets = [];
var mapDiv = document.getElementById("mapContainerDiv");
var map = new WidgetWrapper();
var mapWidget = new MapWidget(map,mapDiv,{
mapTitle: "Publication place"
});
var timeDiv = document.getElementById("plotContainerDiv");
var time = new WidgetWrapper();
var timeWidget = new FuzzyTimelineWidget(time,timeDiv,{
timeTitle: "Publication date"
});
var tableDiv = document.getElementById("tableContainerDiv");
var table = new WidgetWrapper();
var tableWidget = new TableWidget(table,tableDiv);
var dataloaderDiv = document.getElementById("dataloaderContainerDiv");
var dataloader = new WidgetWrapper();
var dataloaderWidget = new DataloaderWidget(dataloader,dataloaderDiv);
var overlayloaderDiv = document.getElementById("overlayloaderContainerDiv");
var overlayloader = new WidgetWrapper();
var overlayloaderWidget = new OverlayloaderWidget(overlayloader,overlayloaderDiv);
overlayloaderWidget.attachMapWidget(mapWidget);
var piechartDiv = document.getElementById("piechartContainerDiv");
var piechart = new WidgetWrapper();
var piechartWidget = new PieChartWidget(piechart,piechartDiv);
piechartWidget.addPieChart(0,"place");
piechartWidget.addPieChart(1,"place");
var storytellingDiv = document.getElementById("storytellingContainerDiv");
var storytelling = new WidgetWrapper();
var storytellingWidget = new StorytellingWidget(storytelling,storytellingDiv);
var kml1 = GeoTemConfig.getKml('data/heine.kml');
datasets.push(new Dataset(GeoTemConfig.loadKml(kml1),'Heinrich Heine'));
var kml2 = GeoTemConfig.getKml('data/kafka.kml');
datasets.push(new Dataset(GeoTemConfig.loadKml(kml2),'Franz Kafka'));
var kml3 = GeoTemConfig.getKml('data/goethe.kml');
datasets.push(new Dataset(GeoTemConfig.loadKml(kml3),'Johann Wolfgang von Goethe'));
map.display(datasets);
time.display(datasets);
table.display(datasets);
piechart.display(datasets);
storytelling.display(datasets);
dataloaderWidget.loadFromURL();
</script>
</body>
</html>