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