-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
373 lines (317 loc) · 14.7 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!--
This is html for displaying the Mythodikos webmap
Adapted from MOLeaflet.html
NEXT STEPS:
1. streamline creation of filtered data layers
3. add script to remove empty layers (if a person layer doesn't have any data)
2. assign unique colors to each layer
(4. allow citation of Greek text)
-->
<!DOCTYPE html>
<html lang="en-US">
<html>
<head>
<title>Mythodikos</title>
<!--the meta element disables unwanted scaling of the page when viewed on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--this is a reference to the Leaflet CSS file; CSS files must be called before JavaScript links-->
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<!--this is a reference to the JQuery style sheet-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<!--this is a reference to the marker cluster style sheet-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<!--this is a reference to the marker cluster default style sheet-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<!--this is a reference to the sidebar style sheet-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Turbo87/[email protected]/css/leaflet-sidebar.css">
<!--this is a link to use google icons-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--this is a refence to the Leaflet JavaScript file; it must be included after the CSS-->
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""
></script>
<!--these are references to the JQuery JavaScript library-->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"
integrity="sha256-6XMVI0zB8cRzfZjqKcD01PBsAy3FlDASrlC8SxCpInY="
crossorigin="anonymous"></script>
<!--this is a reference to the marker cluster JavaScript file-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<!--this is a reference to the FeatureGroup.SubGroup plugin to work with clustering-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.featuregroup.subgroup.js"></script>
<!--this is a reference to the sidebar JavaScript-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Turbo87/[email protected]/js/leaflet-sidebar.js"></script>
<!--CSS for fullscreen #map-->
<style type="text/css">
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100vh;
width: 100vw;
margin: auto;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<!--define sidebar-->
<div id="sidebar" class="sidebar collapsed">
<!--navigation tabs-->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#info" role="tab">
<i class="material-icons">info_outline</i>
</a></li>
<li><a href="#credits" role="tab">
<i class="material-icons">person_outline</i>
</a></li>
<li><a href="#contact" role="tab">
<i class="material-icons">mail_outline</i>
</a></li>
<li><a href="#downloads" role="tab">
<i class="material-icons">file_download</i>
</a></li>
</div>
<!--tab panes & content-->
<div class="sidebar-content">
<div class="sidebar-pane" id="info">
<h1 class="sidebar-header">
About
<span class="sidebar-close">
<i class="material-icons">keyboard_arrow_left</i>
</span>
</h1>
<h2>Mythodikos: Digital Visualization of Mythical People & Places</h2>
<h3>How-To</h3>
<p>
To use, open the layer control on the right side of the screen and toggle the name of one or more mythical figures. The map will display any points in the dataset associated with the selected figures. Click on a point marker to open a popup containing the place name, associated Pleiades ID number, and a list of textual citations supporting the person-place connection.
</p>
<h3>About the Project</h3>
<p>
The <i>Mythodikos</i> project, Ancient Greek for 'connected to myth', is intended to allow an individual to consider mythological figures not just as they are associated with particular texts, authors, and traditions of writing, but also as they are connected to various geographical spaces.
</p>
<p>
Very few digital tools can be called perfect, and none are capable of providing nuanced interpretations of data. <i>Mythodikos</i> is no exception and contains plenty of room for errors in both the back-end and front-end processes of data collection and visualization. Rather, <i>Mythodikos</i> is meant to be starting point for research, something that can call attention to patterns and outliers that might otherwise go unnoticed, and thus inspire a more targeted examination. It can help to reframe our perception of myth as something that consists not only of narrative, but also as something that embodies and is embodied by spatial geographies.
</p>
</div>
<div class="sidebar-pane" id="credits">
<h1 class="sidebar-header">
Credits
<span class="sidebar-close">
<i class="material-icons">keyboard_arrow_left</i>
</span>
</h1>
<p>
The Mythodikos project has been supported by the Department of Greek, Latin, & Classical Studies and the Library & Information Technology Services (LITS) program in Digital Scholarship at Bryn Mawr College.
</p>
<h3>Project Team</h3>
<p><b>Stella Fritzell</b> (Project Lead)</p>
<p><b>Radcliffe Edmonds</b> (Consultant)</p>
<p><b>Alice McGrath</b> (Consultant)</p>
<p><b>Alicia Peaker</b> (Consultant)</p>
<hr>
<h3>Additional Thanks</h3>
<p>Brian Cole</p>
<p>Sean Keenan</p>
</div>
<div class="sidebar-pane" id="contact">
<h1 class="sidebar-header">
Contact
<span class="sidebar-close">
<i class="material-icons">keyboard_arrow_left</i>
</span>
</h1>
<p>Placeholder for contact form.</p>
</div>
<div class="sidebar-pane" id="downloads">
<h1 class="sidebar-header">
Downloads
<span class="sidebar-close">
<i class="material-icons">keyboard_arrow_left</i>
</span>
</h1>
<p>
Data for the Mythodikos project has been complied from the <a href="http://www.perseus.tufts.edu/hopper/">Perseus Digital Library</a> Greek corpus using a text-mining tool built in Python. Geographic coordinates are taken from <a href="https://pleiades.stoa.org">Pleiades</a>.
</p>
<p>
The source code and dataset (geoJSON format) for the Mythodikos project may be accessed through its <a href="https://github.com/sfritzell/mythodikos">GitHub repository</a>.
</p>
</div>
</div>
</div>
<!--define map-->
<div id="map" class="sidebar-map"></div>
<!--JavaScript to build map-->
<script type="text/javascript"> //type specificaiton not necessary, JavaScript = default html script
//load geojson file as data - consider changing geojson file to javascript file with a variable name (making it an array)
var data = $.ajax({
url: "corpus-test-24-3-21.geojson",
dataType: "json",
success: console.log("Data successfully loaded!"),
error: function(xhr) {
alert(xhr.statusText)
}
});
$.when(data).done(function() {
//initialize map
var map = L.map("map", {zoomControl: false, scrollWheelZoom:true}).setView([39.60071, 22.29807], 5);
//load tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 18
}).addTo(map);
//create marker cluster group
var mcg = L.markerClusterGroup().addTo(map);
//create empty layers for filtered data, update alongside person_file
var achillesLayer = L.featureGroup.subGroup(mcg);
var actaeonLayer = L.featureGroup.subGroup(mcg);
var adonisLayer = L.featureGroup.subGroup(mcg);
var amymoneLayer = L.featureGroup.subGroup(mcg);
var andromedaLayer = L.featureGroup.subGroup(mcg);
var antiopeLayer = L.featureGroup.subGroup(mcg);
var anytosLayer = L.featureGroup.subGroup(mcg);
var arachneLayer = L.featureGroup.subGroup(mcg);
var arionLayer = L.featureGroup.subGroup(mcg);
var ascalabusLayer = L.featureGroup.subGroup(mcg);
var asclepiusLayer = L.featureGroup.subGroup(mcg);
var atalantaLayer = L.featureGroup.subGroup(mcg);
var azeiosLayer = L.featureGroup.subGroup(mcg);
var bellerophonLayer = L.featureGroup.subGroup(mcg);
var busirisLayer = L.featureGroup.subGroup(mcg);
var cadmusLayer = L.featureGroup.subGroup(mcg);
var callistoLayer = L.featureGroup.subGroup(mcg);
var cecropsLayer = L.featureGroup.subGroup(mcg);
var coronisLayer = L.featureGroup.subGroup(mcg);
var cycnusLayer = L.featureGroup.subGroup(mcg);
var cyparissusLayer = L.featureGroup.subGroup(mcg);
var cyreneLayer = L.featureGroup.subGroup(mcg);
var danaeLayer = L.featureGroup.subGroup(mcg);
var deucalionLayer = L.featureGroup.subGroup(mcg);
var diomedesLayer = L.featureGroup.subGroup(mcg);
var endymionLayer = L.featureGroup.subGroup(mcg);
var erysicthonLayer = L.featureGroup.subGroup(mcg);
var eryxLayer = L.featureGroup.subGroup(mcg);
var europaLayer = L.featureGroup.subGroup(mcg);
var euadneLayer = L.featureGroup.subGroup(mcg);
var giantsLayer = L.featureGroup.subGroup(mcg);
var hippolytaLayer = L.featureGroup.subGroup(mcg);
var hoplodamosLayer = L.featureGroup.subGroup(mcg);
var meleagerLayer = L.featureGroup.subGroup(mcg);
var midasLayer = L.featureGroup.subGroup(mcg);
var narcissusLayer = L.featureGroup.subGroup(mcg);
var pasiphaeLayer = L.featureGroup.subGroup(mcg);
var pelopsLayer = L.featureGroup.subGroup(mcg);
//create base data layer and filter data
var placeLayer = L.geoJSON(data.responseJSON, {
//define popup content and event; TRY: BIND EVENT REPONSES TO POPUP VARIABLE
onEachFeature: function(feature, layer) {
var dataPopup = L.popup({maxHeight: 140})
.setContent("<h1>"+feature.properties.place+"</h1><p>Pleiades ID: "+feature.properties.id+"</p><p>Person Connection: "+feature.properties.person+"</p><p>Citations: "+feature.properties.citations+"</p>")
layer.bindPopup(dataPopup);
//sort data to appropriate layers -- update with empty layers
var figure = feature.properties.person;
if (figure == "Achilles") layer.addTo(achillesLayer);
else if (figure == "Actaeon") layer.addTo(actaeonLayer);
else if (figure == "Adonis") layer.addTo(adonisLayer);
else if (figure == "Amymone") layer.addTo(amymoneLayer);
else if (figure == "Andromeda") layer.addTo(andromedaLayer);
else if (figure == "Antiope") layer.addTo(antiopeLayer);
else if (figure == "Anytos") layer.addTo(anytosLayer);
else if (figure == "Arachne") layer.addTo(arachneLayer);
else if (figure == "Arion") layer.addTo(arionLayer);
else if (figure == "Ascalabus") layer.addTo(ascalabusLayer);
else if (figure == "Asclepius") layer.addTo(asclepiusLayer);
else if (figure == "Atalanta") layer.addTo(atalantaLayer);
else if (figure == "Azeios") layer.addTo(azeiosLayer);
else if (figure == "Bellerophon") layer.addTo(bellerophonLayer);
else if (figure == "Busiris") layer.addTo(busirisLayer);
else if (figure == "Cadmus") layer.addTo(cadmusLayer);
else if (figure == "Callisto") layer.addTo(callistoLayer);
else if (figure == "Cecrops") layer.addTo(cecropsLayer);
else if (figure == "Coronis") layer.addTo(coronisLayer);
else if (figure == "Cycnus") layer.addTo(cycnusLayer);
else if (figure == "Cyparissus") layer.addTo(cyparissusLayer);
else if (figure == "Cyrene") layer.addTo(cyreneLayer);
else if (figure == "Danae") layer.addTo(danaeLayer);
else if (figure == "Deucalion") layer.addTo(deucalionLayer);
else if (figure == "Diomedes") layer.addTo(diomedesLayer);
else if (figure == "Endymion") layer.addTo(endymionLayer);
else if (figure == "Erysicthon") layer.addTo(erysicthonLayer);
else if (figure == "Eyrx") layer.addTo(eryxLayer);
else if (figure == "Europa") layer.addTo(europaLayer);
else if (figure == "Euadne") layer.addTo(euadneLayer);
else if (figure == "Giants") layer.addTo(giantsLayer);
else if (figure == "Hippolyta") layer.addTo(hippolytaLayer);
else if (figure == "Hoplodamos") layer.addTo(hoplodamosLayer);
else if (figure == "Meleager") layer.addTo(meleagerLayer);
else if (figure == "Midas") layer.addTo(midasLayer);
else if (figure == "Narcissus") layer.addTo(narcissusLayer);
else if (figure == "Pasiphae") layer.addTo(pasiphaeLayer);
else if (figure == "Pelops") layer.addTo(pelopsLayer);
}
});
//make key:value definition for layers included in layer control -- update with empty layers
var overlayMaps = {
"Achilles": achillesLayer,
"Actaeon":actaeonLayer,
"Adonis": adonisLayer,
"Amymone": amymoneLayer,
"Andromeda": andromedaLayer,
"Antiope": antiopeLayer,
"Anytos": anytosLayer,
"Arachne": arachneLayer,
"Arion": arionLayer,
"Ascalabus": ascalabusLayer,
"Asclepius": asclepiusLayer,
"Atalanta": atalantaLayer,
"Azeios": azeiosLayer,
"Bellerophon": bellerophonLayer,
"Busiris": busirisLayer,
"Cadmus": cadmusLayer,
"Callisto": callistoLayer,
"Cecrops": cecropsLayer,
"Coronis": coronisLayer,
"Cycnus": cycnusLayer,
"Cyparissus": cyparissusLayer,
"Cyrene": cyreneLayer,
"Danae": danaeLayer,
"Deucalion": deucalionLayer,
"Diomedes": diomedesLayer,
"Endymion": endymionLayer,
"Erysicthon": erysicthonLayer,
"Eryx": eryxLayer,
"Europa": europaLayer,
"Euadne": euadneLayer,
"Giants": giantsLayer,
"Hippolyta": hippolytaLayer,
"Hoplodamos": hoplodamosLayer,
"Meleager": meleagerLayer,
"Midas": midasLayer,
"Narcissus": narcissusLayer,
"Pasiphae": pasiphaeLayer,
"Pelops": pelopsLayer
};
//initialize sidebar
var sidebar = L.control.sidebar("sidebar").addTo(map);
//initialize zoom control
var zoomControl = L.control.zoom({position: "topright"}).addTo(map);
//initialize layer contorl
var layerControl = L.control.layers(null, overlayMaps, {position: "topright"}).addTo(map);
});
</script>
</body>
</html>